large-model-component 1.0.0

package/packages/largeModel/index.vue

@@ -0,0 +1,1703 @@
+<template>
+  <div>
+    <!-- 悬浮入口按钮 -->
+    <div class="entrance-btn" @click="open" title="打开智景大模型"></div>
+
+    <!-- AI 助手弹窗 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      width="1200px"
+      :show-close="false"
+      class="llm-custom-dialog"
+      append-to-body
+    >
+      <div class="dialog-body-container">
+        <el-container class="chat-layout">
+          <!-- 左侧侧边栏 -->
+          <el-aside width="216px" class="sidebar">
+            <img src="@/assets/img/zhijing-model.png" alt="" class="top-logo"/>
+            <el-button
+              type="primary"
+              icon="el-icon-plus"
+              size="small"
+              class="new-chat-btn"
+              @click="addRecord"
+              :disabled="loading"
+            >新建对话
+            </el-button>
+            <div class="sidebar-section-title">快捷访问</div>
+            <div class="quick-access-list">
+              <div class="qa-item" v-for="(item, idx) in quickAccessList" :key="item.id || idx"
+                   @click="handleQuickAccess(item)">
+                <img :src="item.img" alt=""/><span>{{ item.name }}</span>
+              </div>
+              <div v-if="quickAccessList.length === 0 && !isLoadingQuickAccess" class="empty-qa-tip">暂无快捷访问</div>
+            </div>
+            <div class="sidebar-section-title history-title">历史会话</div>
+            <div class="history-search-box" v-if="record.length > 10 || historySearchQuery">
+              <el-input v-model="historySearchQuery" placeholder="搜索历史记录..." prefix-icon="el-icon-search"
+                        size="mini" clearable @clear="resetHistoryAndLoad" @change="resetHistoryAndLoad"></el-input>
+            </div>
+            <div
+              ref="historyScrollContainer"
+              class="history-scroll-container"
+              style="height: calc(100% - 428px); overflow-y: auto;"
+            >
+              <el-menu :default-active="activeChatId ? activeChatId.toString() : ''" class="history-menu"
+                       background-color="transparent" text-color="#606266" active-text-color="#409EFF">
+                <el-menu-item v-for="chat in record" :key="chat.id" :index="chat.id.toString()" @click="cutRecord(chat)"
+                              class="history-menu-item">
+                  <i class="el-icon-chat-line-square"></i>
+                  <span slot="title" class="chat-title-span" :title="chat.title">{{ chat.title }}</span>
+                  <i class="el-icon-delete delete-icon" slot="title" @click.stop="delRecord(chat)" title="删除会话"></i>
+                </el-menu-item>
+                <div v-if="record.length === 0 && !isLoadingHistory" class="empty-search-tip">
+                  {{ historySearchQuery ? '暂无相关历史记录' : '暂无历史会话' }}
+                </div>
+                <div v-if="isLoadingHistory" class="loading-history-tip"><i class="el-icon-loading"></i> 加载中...</div>
+                <div v-if="!isLoadingHistory && !hasMoreHistory && record.length > 0" class="no-more-tip">没有更多了
+                </div>
+              </el-menu>
+            </div>
+          </el-aside>
+
+          <!-- 右侧主聊天区 -->
+          <el-main class="main-chat-area">
+            <div class="close-btn-wrapper" @click="dialogVisible = false"></div>
+            <div class="message-list" ref="messageListRef">
+              <!-- 欢迎页 -->
+              <div v-if="conversation.dialogue.length === 0" class="welcome-screen">
+                <div class="welcome-content">
+                  <img src="@/assets/img/zhijing-model.png" alt="Logo" class="welcome-logo"/>
+                  <p class="welcome-desc">行业场景图谱领域的专业大模型，依托"场景图谱 + 要素清单 + 资料数据"进行训练优化，<br>实现企业需求与资源的高效对接。
+                  </p>
+                </div>
+                <div class="faq-section">
+                  <div class="faq-header">
+                    <div class="faq-title"><img src="@/assets/img/qas.png" alt="">常见问题</div>
+                    <div class="refresh-btn" @click="changeFaq"><i class="el-icon-refresh"
+                                                                   style="margin-right: 4px;"></i> 换一批
+                    </div>
+                  </div>
+                  <div class="faq-list">
+                    <div v-for="(q, idx) in faqList" :key="idx" class="faq-item" :title="q.query || q"
+                         @click="handleQuickQuestion(q)">{{ q.query || q }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- 消息列表 -->
+              <div class="message-container">
+                <div class="message-item" v-for="(item, index) in conversation.dialogue" :key="index"
+                     :class="item.role">
+                  <div class="message-bubble">
+                    <img
+                      :src="item.role === 'assistant' ? require('@/assets/img/serviceIcon.png') : require('@/assets/img/quizzer.png')"
+                      alt="" class="avatar"/>
+                    <div class="bubble-content" :class="item.role">
+                      <contentFold v-if="item.role === 'assistant'" :content="item.content"></contentFold>
+                      <div v-else class="user-text" v-html="item.content"></div>
+                    </div>
+                  </div>
+                  <div v-if="item.role === 'assistant' && !item.isStreaming" class="action-bar">
+                    <el-tooltip content="复制" placement="top"><i class="el-icon-document-copy action-icon"
+                                                                  @click="copyContent(item.content)"></i></el-tooltip>
+                    <el-tooltip content="重新生成" placement="top"><i class="el-icon-refresh action-icon"
+                                                                      @click="regenerateResponse(index)"></i>
+                    </el-tooltip>
+                    <el-tooltip content="赞" placement="top"><i class="el-icon-thumb action-icon"
+                                                                :class="{ 'active': item.voteStatus === 1 }"
+                                                                @click="toggleFeedback(index, 1,item)"></i></el-tooltip>
+                    <el-tooltip content="踩" placement="top"><i class="el-icon-thumb action-icon rotated"
+                                                                :class="{ 'active': item.voteStatus === -1 }"
+                                                                @click="toggleFeedback(index, -1,item)"></i>
+                    </el-tooltip>
+                  </div>
+                </div>
+                <div v-if="loading" class="loading-indicator">
+                  <i class="el-icon-loading"></i> 思考中...
+                </div>
+              </div>
+            </div>
+
+            <!-- 输入区域 -->
+            <div class="input-area">
+              <div class="input-box">
+                <!-- 文件列表展示区：支持显示多个文件 -->
+                <div class="file-list" v-if="files.length > 0">
+                  <div v-for="file in files" :key="file.id" class="file-item">
+                    <i class="el-icon-close close_icon" @click="closeIcon(file.id)" title="移除文件"></i>
+                    <div class="file-info">
+                      <img v-if="file.type === 'image'" :src="file.previewUrl" style="width: 20px; height: 20px;"
+                           alt="">
+                      <i v-else class="el-icon-document"></i>
+                      <strong>{{ file.name }}</strong>
+                      <div class="status"
+                           :class="{ completed: file.status === 'completed', error: file.status === 'error', uploading: file.status === 'uploading' }">
+                        {{ getStatusText(file) }}
+                      </div>
+                      <div class="progress-bar" v-if="file.status === 'uploading'">
+                        <div class="progress" :style="{ width: file.progress + '%' }"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <el-input
+                  ref="questionInput"
+                  type="textarea"
+                  :rows="1"
+                  resize="none"
+                  :maxlength="200"
+                  :disabled="loading"
+                  placeholder="请输入 200 字以内的自然语言描述..."
+                  v-model="inputContent"
+                  @keydown.native.enter.prevent="handleEnterKey"
+                  @focus="isFocused = true"
+                  @blur="isFocused = false"
+                  class="custom-input"
+                ></el-input>
+
+                <div class="input-tools">
+                  <div class="left-tools">
+                    <el-tooltip content="上传附件 (支持.pdf/.doc/.docx/.txt/.pptx/.ppt/.xls/.xlsx/.pdf/.png/.jpg/.jpeg)"
+                                placement="top">
+                      <div class="upload-trigger">
+                        <i class="el-icon-paperclip tool-icon" :class="{ 'tool-icon-disabled': loading }"></i>
+                        <input
+                          type="file"
+                          id="fileInput"
+                          @change="handleFileChange"
+                          accept=".pdf,.png,.jpg,.jpeg"
+                          :disabled="loading"
+                          multiple
+                        />
+                      </div>
+                    </el-tooltip>
+                  </div>
+                  <el-button
+                    type="primary"
+                    class="send-btn"
+                    :disabled="(!inputContent.trim() && !hasCompletedFile) || hasUploadingFile"
+                    @click="loading ? stopGeneration() : save()"
+                  >
+                    <template v-if="loading">
+                      <i class="el-icon-close" style="margin-right: 4px;"></i>
+                      停止生成
+                    </template>
+                    <template v-else>
+                      <i class="el-icon-position"></i>
+                    </template>
+                  </el-button>
+                </div>
+              </div>
+              <div class="footer-disclaimer">模型版本：V2.0.0 | 内容仅供参考，不构成专业建议</div>
+            </div>
+          </el-main>
+        </el-container>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  conversationPage,
+  deleteHistory,
+  historyDetail,
+  loginCas,
+  quickAccess as getQuickAccessApi,
+  suggestive,
+  votePort
+} from "@/api/user";
+import ContentFold from './contentFold.vue';
+
+const TOKEN_KEY = 'Industrial-Access-Token';
+const CAS_LOGIN_URL = 'https://dticts.paas.casicloud.com/cas/login?service=';
+
+const ALLOWED_EXTENSIONS = ['pdf', 'doc', 'docx', 'txt', 'pptx', 'ppt', 'xls', 'xlsx', 'jpg', 'jpeg', 'png', 'gif', 'webp'];
+const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10M
+const DEFAULT_ICONS = [
+  require("@/assets/img/quick_finder_icon1.png"),
+  require("@/assets/img/quick_finder_icon2.png"),
+  require("@/assets/img/quick_finder_icon3.png"),
+  require("@/assets/img/quick_finder_icon4.png")
+];
+export default {
+  name: 'LLMAssistantDialog',
+  components: {ContentFold},
+  data() {
+    return {
+      dialogVisible: false,
+      inputContent: '',
+      loading: false,
+      abortController: null,
+      isCancelled: false,
+      isFocused: false,
+      record: [],
+      pageParams: {currentPage: 1, pageSize: 10, total: 0, hasMore: true, historySearchQuery: ""},
+      isLoadingHistory: false,
+      historySearchQuery: '',
+      isSearching: false,
+      quickAccessList: [],
+      isLoadingQuickAccess: false,
+      conversation: {id: '', title: '', userId: '', dialogue: [], createTime: ''},
+      activeChatId: null,
+      files: [], // 存储所有上传的文件对象
+      fileCounter: 0,
+      faqList: [],
+      messageId: null,
+      pendingHistoryUpdate: null,
+    };
+  },
+  computed: {
+    hasUploadingFile() {
+      return this.files.some(f => f.status === 'uploading' || f.status === 'pending');
+    },
+    hasCompletedFile() {
+      return this.files.some(f => f.status === 'completed');
+    },
+    hasMoreHistory() {
+      return this.pageParams.hasMore && !this.isSearching;
+    }
+  },
+  async mounted() {
+    await this.handleCasCallback();
+    this.$nextTick(() => {
+      this.initScrollListener();
+    });
+  },
+  beforeDestroy() {
+    this.removeScrollListener();
+    if (this.throttleTimer) {
+      clearTimeout(this.throttleTimer);
+      this.throttleTimer = null;
+    }
+  },
+  methods: {
+    // 处理 CAS 回调：如果 URL 带有 ticket，则用它换取 token
+    async handleCasCallback() {
+      const urlParams = new URLSearchParams(window.location.search);
+      const ticket = urlParams.get('ticket');
+      if (!ticket) return;
+
+      try {
+        // serviceUrl 是去掉 ticket 参数后的当前页面地址
+        const serviceUrl = window.location.origin + window.location.pathname;
+        const res = await loginCas({ ticket, serviceUrl });
+        const token = res.data?.data?.token;
+        if (token) {
+          localStorage.setItem(TOKEN_KEY, token);
+          // ticket 换取 token 成功后自动打开弹窗
+          this.openDialog();
+        }
+      } catch (e) {
+        console.error('CAS 登录失败:', e);
+      } finally {
+        // 清除 URL 中的 ticket 参数，避免刷新重复请求
+        const cleanUrl = window.location.origin + window.location.pathname;
+        window.history.replaceState({}, '', cleanUrl);
+      }
+    },
+
+    // 打开组件前先做 CAS 认证
+    open() {
+      window.location.href = CAS_LOGIN_URL + encodeURIComponent(location.href);
+    },
+
+    // CAS 认证完成后真正打开弹窗（由 handleCasCallback 成功后调用，或 token 已存在时直接调用）
+    openDialog() {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        this.initData();
+        this.initScrollListener();
+      });
+    },
+    async stopGeneration() {
+      if (this.abortController && !this.abortController.signal.aborted) {
+        console.log('=== 触发停止生成 ===');
+
+        // 先调用后端取消接口，让后端停止处理
+        if (this.messageId) {
+          try {
+            const token = localStorage.getItem('Industrial-Access-Token');
+            const response = await fetch(`${window.location.origin}/gateway/intelligent/graph/talkbot/query/cancel?messageId=${encodeURIComponent(this.messageId)}`, {
+              method: 'POST',
+              headers: {
+                'Industrial-Access-Token': token
+              }
+            });
+
+            if (response.ok) {
+              const result = await response.json();
+              console.log('后端取消响应:', result);
+            } else {
+              console.warn('后端取消请求失败:', response.status);
+            }
+          } catch (err) {
+            console.error('发送取消请求失败:', err);
+          }
+        }
+
+        // 再中止前端请求
+        this.abortController.abort();
+
+        // 更新 UI
+        const lastItem = this.conversation.dialogue[this.conversation.dialogue.length - 1];
+        if (lastItem && lastItem.role === 'assistant') {
+          lastItem.content += '\n\n⏹ 已停止生成';
+          lastItem.isStreaming = false;
+        }
+
+        this.loading = false;
+        this.$message.info('已停止生成');
+      } else {
+        console.log('=== 无进行中的请求可停止 ===');
+      }
+
+    },
+    initScrollListener() {
+      const container = this.$refs.historyScrollContainer;
+      if (container) {
+        container.addEventListener('scroll', this.handleHistoryScroll);
+      }
+    },
+    removeScrollListener() {
+      const container = this.$refs.historyScrollContainer;
+      if (container) {
+        container.removeEventListener('scroll', this.handleHistoryScroll);
+      }
+    },
+    async initData() {
+      await this.getQuickAccess();
+      await this.changeFaq();
+      this.resetHistoryAndLoad();
+    },
+    async getQuickAccess() {
+      this.isLoadingQuickAccess = true;
+      try {
+        const res = await getQuickAccessApi();
+        const list = res.data?.data || res.data || [];
+        this.quickAccessList = list.map((item, index) => ({img: DEFAULT_ICONS[index % DEFAULT_ICONS.length], ...item}));
+      } catch (error) {
+        this.quickAccessList = [];
+      } finally {
+        this.isLoadingQuickAccess = false;
+      }
+    },
+    resetHistoryAndLoad() {
+      this.record = [];
+      this.pageParams = {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0,
+        historySearchQuery: this.historySearchQuery,
+        hasMore: true
+      };
+      this.isSearching = !!this.historySearchQuery;
+      this.loadMoreHistory();
+    },
+    async loadMoreHistory() {
+      if (this.isLoadingHistory || !this.pageParams.hasMore) return;
+
+      this.isLoadingHistory = true;
+      try {
+        const params = {
+          pageSize: this.pageParams.pageSize,
+          currentPage: this.pageParams.currentPage,
+          keyWord: this.pageParams.historySearchQuery
+        };
+
+        const res = await conversationPage(params);
+        const responseData = res.data?.data || res.data;
+        const list = responseData?.content || [];
+        const total = responseData?.totalElement || 0;
+
+        this.record = [...this.record, ...list.map(item => ({
+          ...item,
+          titleCopy: item.title,
+          schema: 'readOnly'
+        }))];
+
+        this.pageParams.total = total;
+        if (this.record.length >= total) {
+          this.pageParams.hasMore = false;
+        } else {
+          this.pageParams.currentPage++;
+          this.pageParams.hasMore = true;
+        }
+      } catch (error) {
+        console.error('加载历史记录失败:', error);
+        this.pageParams.hasMore = false;
+        this.$message.error('加载历史会话失败');
+      } finally {
+        this.isLoadingHistory = false;
+      }
+    },
+    handleHistoryScroll(event) {
+      if (this.throttleTimer) return;
+      this.throttleTimer = setTimeout(() => {
+        const target = event.target;
+        const {scrollTop, scrollHeight, clientHeight} = target;
+
+        if (scrollTop + clientHeight >= scrollHeight - 50) {
+          if (!this.isLoadingHistory && this.pageParams.hasMore) {
+            this.loadMoreHistory();
+          }
+        }
+
+        this.throttleTimer = null;
+      }, 300);
+    },
+    changeFaq() {
+      suggestive().then(res => {
+        this.faqList = res.data?.data || res.data || []
+      }).catch(() => {
+      });
+    },
+    async addRecord() {
+      if (this.loading) return;
+      this.conversation = {id: '', title: '', userId: '', dialogue: [], createTime: ''};
+      this.activeChatId = null;
+      this.inputContent = '';
+      this.files = [];
+      this.$refs.questionInput?.focus();
+      await this.resetHistoryAndLoad();
+      this.scroll();
+    },
+    cutRecord(item) {
+      if (this.loading) return;
+      if (this.activeChatId === item.id && this.conversation.dialogue.length > 0) return;
+
+      this.activeChatId = item.id;
+      this.conversation = {...item, dialogue: []};
+      this.loading = true;
+
+      historyDetail(item.id).then((res) => {
+        const detailData = res.data?.data || res.data || [];
+        this.conversation.dialogue = detailData.map(msg => ({
+          ...msg,
+          feedback: msg.feedback || null,
+          isStreaming: false
+        }));
+        this.scroll();
+      }).catch(err => {
+        this.$message.error("加载会话详情失败");
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    delRecord(item) {
+      this.$confirm('确认删除该会话吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        deleteHistory(item.id).then(() => {
+          this.$message.success('删除成功');
+          this.resetHistoryAndLoad();
+          if (item.id === this.activeChatId) this.addRecord();
+        }).catch(() => {
+          this.$message.error('删除失败');
+        });
+      }).catch(() => {
+      });
+    },
+    handleEnterKey(e) {
+      if (!e.shiftKey && !this.loading) this.save();
+    },
+    handleQuickAccess(item) {
+      if (item.link) this.$router.push({path: item.link});
+    },
+    handleQuickQuestion(item) {
+      this.inputContent = typeof item === 'string' ? item : (item.query || '');
+      this.save();
+    },
+
+    async save() {
+      if (this.abortController && !this.abortController.signal.aborted) {
+        console.log('=== 中止进行中的请求 ===');
+        this.abortController.abort();
+        await new Promise(resolve => setTimeout(resolve, 50));
+      }
+
+      this.isCancelled = false;
+      this.loading = true;
+      this.abortController = null;
+
+      this.abortController = new AbortController();
+      const signal = this.abortController.signal;
+
+      signal.addEventListener('abort', () => {
+        console.log('=== 取消信号已触发 ===');
+        this.isCancelled = true;
+      });
+
+      const completedFiles = this.files.filter(f => f.status === 'completed');
+      const trimmedInput = this.inputContent.trim();
+
+      if (trimmedInput.length > 200) {
+        return this.$message.warning('输入内容请控制在 200 字以内！');
+      }
+      if (!trimmedInput && completedFiles.length === 0) {
+        return this.$message.warning('请输入文字描述！');
+      }
+      if (!trimmedInput && completedFiles.length > 0) {
+        return this.$message.warning('上传文件时必须输入文字描述！');
+      }
+
+      this.loading = true;
+      const filesToSendIds = new Set(completedFiles.map(f => f.id));
+
+      const parseFileList = this.files
+        .filter(f => f.type === 'document' && f.status === 'completed')
+        .map(f => ({ fileId: f.id, fileName: f.name, markdown: f.parsedContent }));
+      const imageFiles = this.files
+        .filter(f => f.type === 'image' && f.status === 'completed')
+        .map(f => f.rawFile);
+
+      const userMsg = {
+        role: 'user',
+        content: this.inputContent,
+        files: completedFiles.length > 0 ? completedFiles.map(f => f.name) : []
+      };
+
+      const aiMsg = {
+        role: 'assistant',
+        content: '',
+        feedback: null,
+        isStreaming: true
+      };
+
+      this.conversation.dialogue.push(userMsg, aiMsg);
+      this.scroll();
+
+      try {
+        const token = localStorage.getItem('Industrial-Access-Token');
+
+        // 构建 FormData
+        const formData = new FormData();
+        formData.append('conversationId', this.conversation.id);
+        formData.append('query', this.inputContent);
+        this.messageId = `msg-${Date.now()}`;
+        formData.append('messageId', this.messageId);
+        if (parseFileList.length > 0) {
+          formData.append('parsedFiles', JSON.stringify(parseFileList));
+        }
+        imageFiles.forEach(file => formData.append('images', file));
+
+        // 使用 fetch 获取流式响应
+        const response = await fetch(`${window.location.origin}/gateway/intelligent/graph/talkbot/query`, {
+          // const response = await fetch(`/talkbot/query`, {
+          method: 'POST',
+          body: formData,
+          headers: {
+            'Industrial-Access-Token': token
+          },
+          signal: signal
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        // 读取流式响应（直接读取，不解析 SSE 格式）
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder('utf-8');
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+
+          const chunk = decoder.decode(value, { stream: true });
+          if (chunk) {
+            this.appendAnswer(chunk);
+          }
+        }
+
+        // 响应完成
+        this.finalizeResponse(filesToSendIds);
+
+      } catch (error) {
+        if (error.name === 'AbortError') {
+          console.log('请求已中止');
+        }else{
+          console.error('请求失败:', error);
+          this.loading = false;
+          const lastItem = this.conversation.dialogue[this.conversation.dialogue.length - 1];
+          if (lastItem && lastItem.role === 'assistant') {
+            lastItem.content = '回答失败，请重试！';
+            lastItem.error = true;
+            lastItem.isStreaming = false;
+          }
+        }
+      }finally {
+        this.loading = false;
+        this.abortController = null;
+        this.isCancelled = false;
+        this.$nextTick(() => this.scroll());
+      }
+    },
+
+    finalizeResponse(filesToSendIds) {
+      const lastItem = this.conversation.dialogue[this.conversation.dialogue.length - 1];
+      if (lastItem && lastItem.role === 'assistant') {
+        lastItem.isStreaming = false;
+      }
+      this.loading = false;
+      this.$nextTick(() => this.scroll());
+
+      setTimeout(async () => {
+        const res = await conversationPage({
+          currentPage: 1,
+          pageSize: 10,
+          keyWord: this.pageParams.historySearchQuery
+        });
+        const newList = res.data?.data?.content || res.data?.content || [];
+        if (newList.length > 0) {
+          this.conversation.id = newList[0].id;
+          this.conversation.title = newList[0].title;
+          this.activeChatId = newList[0].id;
+          this.record = newList;
+        }
+        this.files = this.files.filter(f => !filesToSendIds.has(f.id));
+        this.inputContent = '';
+      }, 500);
+    },
+
+    appendAnswer(content) {
+      const lastIndex = this.conversation.dialogue.length - 1;
+      const lastItem = this.conversation.dialogue[lastIndex];
+      if (lastItem && lastItem.role === 'assistant') {
+        // 使用 $set 确保 Vue 2 响应式更新
+        this.$set(this.conversation.dialogue, lastIndex, {
+          ...lastItem,
+          content: lastItem.content + content
+        });
+        this.scroll();
+      }
+    },
+    scroll() {
+      if (this.dialogVisible) {
+        this.$nextTick(() => {
+          const container = this.$refs.messageListRef;
+          if (container) container.scrollTop = container.scrollHeight;
+        });
+      }
+    },
+    copyContent(text) {
+      if (!text) return;
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = text;
+      const pureText = tempDiv.textContent || tempDiv.innerText || text;
+
+      if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
+        navigator.clipboard.writeText(pureText).then(() => {
+          this.$message.success('已复制');
+        }).catch(err => {
+          console.error('Clipboard API 失败:', err);
+          this.fallbackCopy(pureText);
+        });
+      } else {
+        this.fallbackCopy(pureText);
+      }
+    },
+    fallbackCopy(text) {
+      const tempInput = document.createElement('textarea');
+      tempInput.value = text;
+      document.body.appendChild(tempInput);
+      tempInput.select();
+      try {
+        document.execCommand('copy');
+        this.$message.success('已复制');
+      } catch (err) {
+        this.$message.error('复制失败，请手动复制');
+      }
+      document.body.removeChild(tempInput);
+    },
+    regenerateResponse(index) {
+      if (this.loading) return;
+      const currentMsg = this.conversation.dialogue[index];
+      if (!currentMsg || currentMsg.role !== 'assistant') return;
+      const prevIndex = index - 1;
+      if (prevIndex < 0 || this.conversation.dialogue[prevIndex].role !== 'user') {
+        this.$message.warning('找不到对应的问题');
+        return;
+      }
+      const userMsg = this.conversation.dialogue[prevIndex];
+      this.$confirm('确定要重新生成回答吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.conversation.dialogue = this.conversation.dialogue.slice(0, prevIndex + 1);
+        this.inputContent = userMsg.content.replace(/^\[发送了文件：[\s\S]*?\]/, '').trim();
+        this.save();
+      }).catch(() => {
+      });
+    },
+    async toggleFeedback(index, status, item) {
+      const originalStatus = item.voteStatus;
+      item.voteStatus = (item.voteStatus === status) ? null : status;
+
+      try {
+        const res = await votePort({
+          messageId: item.id || this.messageId + '-assistant',
+          voteStatus: item.voteStatus
+        });
+
+        if (res.data.code === 200) {
+          this.$message.success(
+            item.voteStatus === 1 ? '感谢点赞' :
+              item.voteStatus === -1 ? '收到您的批评' : '已取消反馈'
+          );
+          if (this.activeChatId) {
+            await this.refreshCurrentConversation();
+          }
+        } else {
+          item.voteStatus = originalStatus;
+          this.$message.error('反馈提交失败，请重试');
+        }
+      } catch (error) {
+        console.error('投票接口调用失败:', error);
+        item.voteStatus = originalStatus;
+        this.$message.error('网络异常，反馈提交失败');
+      }
+    },
+    async refreshCurrentConversation() {
+      if (!this.activeChatId) return;
+      try {
+        const res = await historyDetail(this.activeChatId);
+        const detailData = res.data?.data || res.data || [];
+
+        this.conversation.dialogue = detailData.map((msg, idx) => {
+          const localMsg = this.conversation.dialogue[idx];
+          return {
+            ...msg,
+            isStreaming: localMsg?.isStreaming || false,
+            feedback: msg.feedback || null,
+            voteStatus: msg.voteStatus !== undefined ? msg.voteStatus :
+              (msg.feedback === 'like' ? 1 : msg.feedback === 'dislike' ? -1 : null)
+          };
+        });
+
+        this.scroll();
+      } catch (error) {
+        console.error('刷新会话详情失败:', error);
+      }
+    },
+    handleFileChange(e) {
+      if (e.target.files.length) this.processFiles(e.target.files);
+      e.target.value = '';
+    },
+    processFiles(fileList) {
+      const docsToParse = [];
+      const imagesToUpload = [];
+
+      for (let i = 0; i < fileList.length; i++) {
+        const file = fileList[i];
+        const nameParts = file.name.split('.');
+        const extension = nameParts.pop().toLowerCase();
+
+        if (file.size > MAX_FILE_SIZE) {
+          this.$message.error(`文件过大（最大 10M）：${file.name}`);
+          continue;
+        }
+
+        if (!ALLOWED_EXTENSIONS.includes(extension)) {
+          this.$message.error(`不支持的格式：${file.name}`);
+          continue;
+        }
+
+        const fileId = `file_${Date.now()}_${this.fileCounter++}`;
+
+        if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(extension)) {
+          const objectURL = URL.createObjectURL(file);
+          imagesToUpload.push({
+            name: file.name,
+            rawFile: file,
+            status: 'completed',
+            type: 'image',
+            previewUrl: objectURL
+          });
+        } else {
+          docsToParse.push({
+            id: fileId,
+            name: file.name,
+            rawFile: file,
+            status: 'pending',
+            type: 'document',
+            progress: 0
+          });
+        }
+      }
+      this.files.push(...docsToParse, ...imagesToUpload);
+      docsToParse.forEach(fileObj => {
+        this.uploadAndParseFile(fileObj);
+      });
+    },
+    async uploadAndParseFile(fileObj) {
+      const index = this.files.findIndex(f => f.id === fileObj.id);
+      if (index === -1) return;
+
+      this.files[index].status = 'uploading';
+      this.files[index].progress = 10;
+
+      const formData = new FormData();
+      formData.append('file', fileObj.rawFile);
+      formData.append('fileId', fileObj.id);
+
+      try {
+        const url = '/gateway/intelligent/graph/file/parse';
+        const response = await fetch(url, {
+          method: 'POST',
+          body: formData,
+          headers: {
+            "Industrial-Access-Token": localStorage.getItem('Industrial-Access-Token')
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`网络请求失败：${response.status}`);
+        }
+
+        const result = await response.json();
+        console.log('文件解析返回:', result);
+        if (result.data && result.data.success === true && result.data.markdown) {
+          this.files[index].status = 'completed';
+          this.files[index].progress = 100;
+          this.files[index].parsedContent = result.data.markdown;
+          this.$message.success(`${fileObj.name} 解析完成`);
+        } else if (result.data && result.data.success === false) {
+          throw new Error(result.data.error || '解析失败');
+        } else {
+          throw new Error('返回数据格式异常');
+        }
+
+      } catch (error) {
+        console.error('文件上传解析错误:', error);
+        this.files[index].status = 'error';
+        this.files[index].errorMsg = error.message;
+        this.$message.error(`${fileObj.name} 解析失败：${error.message}`);
+      }
+    },
+
+    getStatusText(file) {
+      switch (file.status) {
+        case 'pending':
+          return '准备中...';
+        case 'uploading':
+          return `解析中... ${Math.round(file.progress)}%`;
+        case 'completed':
+          return '✅ 就绪';
+        case 'error':
+          return `❌ ${file.errorMsg}`;
+        default:
+          return '';
+      }
+    },
+    closeIcon(fileId) {
+      const index = this.files.findIndex(f => f.id === fileId);
+      if (index !== -1) this.files.splice(index, 1);
+    },
+  }
+};
+</script>
+
+<style scoped lang="scss">
+$primary-blue: #409EFF;
+$text-regular: #606266;
+$border-color: #EBEEF5;
+::v-deep .scroll-bar::-webkit-scrollbar {
+  width: 6px;
+}
+
+::v-deep .scroll-bar::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 3px;
+}
+
+.entrance-btn {
+  width: 83px;
+  height: 90px;
+  position: fixed;
+  right: 30px;
+  bottom: 100px;
+  cursor: pointer;
+  background: url("~@/assets/img/ai-chart.png");
+  background-size: 100% 100%;
+  z-index: 998;
+}
+
+.llm-custom-dialog {
+  ::v-deep .el-dialog {
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
+  }
+
+  ::v-deep .el-dialog__header {
+    padding: 0;
+    border-bottom: none;
+    margin-right: 0;
+    background: #fff;
+    display: none;
+  }
+
+  ::v-deep .el-dialog__body {
+    padding: 0;
+    height: 650px;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+}
+
+.dialog-body-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+}
+
+.chat-layout {
+  height: 100%;
+}
+
+.sidebar {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px 0 0 8px;
+  position: relative;
+  z-index: 1;
+  background: linear-gradient(180deg, rgba(0, 109, 255, 0.08) 0%, rgba(0, 91, 255, 0.18) 100%), url('~@/assets/img/scrol-bg.png') no-repeat bottom center / 100% 280px;
+
+  .top-logo {
+    width: 90px;
+    height: 78px;
+    margin: 0 auto 20px;
+    display: block;
+    z-index: 2;
+    position: relative;
+  }
+
+  .new-chat-btn {
+    width: 100%;
+    margin-bottom: 20px;
+    border-radius: 8px;
+    background-color: transparent;
+    border: 1px solid #005BFF;
+    color: #005BFF;
+
+    &:hover {
+      background-color: #005BFF;
+      color: #fff;
+    }
+  }
+
+  .sidebar-section-title {
+    margin-bottom: 12px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 15px;
+    color: rgba(0, 0, 0, 0.88);
+    z-index: 2;
+    position: relative;
+
+    &.history-title {
+      margin-top: 10px;
+      margin-bottom: 8px;
+    }
+  }
+
+  .quick-access-list {
+    z-index: 2;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: 4px;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 91, 255, 0.2);
+      border-radius: 2px;
+
+      &:hover {
+        background: rgba(0, 91, 255, 0.4);
+      }
+    }
+
+    .qa-item {
+      display: flex;
+      align-items: center;
+      padding: 5px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-size: 13px;
+      color: $text-regular;
+      flex-shrink: 0;
+
+      img {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        object-fit: contain;
+      }
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    .empty-qa-tip {
+      text-align: center;
+      padding: 10px 0;
+      font-size: 12px;
+      color: #909399;
+      font-style: italic;
+    }
+  }
+
+  .history-search-box {
+    margin-bottom: 12px;
+    z-index: 2;
+    position: relative;
+  }
+
+  .history-scroll-container {
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  .history-scroll-container::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .history-scroll-container::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+  }
+
+  .history-menu {
+    border-right: none;
+    background: transparent;
+    z-index: 2;
+    position: relative;
+  }
+
+  .el-menu-item {
+    height: 40px;
+    line-height: 40px;
+    font-size: 13px;
+    border-radius: 6px;
+    margin-bottom: 4px;
+    padding-left: 15px !important;
+    padding-right: 10px !important;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+
+    &:hover {
+      background-color: rgba(64, 158, 255, 0.1);
+
+      .delete-icon {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    &.is-active {
+      background-color: #fff;
+      color: $primary-blue;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+
+      .delete-icon {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+
+    > i.el-icon-chat-line-square {
+      margin-right: 8px;
+      flex-shrink: 0;
+    }
+
+    .chat-title-span {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: block;
+      max-width: calc(100% - 40px);
+    }
+
+    .delete-icon {
+      font-size: 14px;
+      color: #F56C6C;
+      cursor: pointer;
+      margin-left: 8px;
+      flex-shrink: 0;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s ease;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .loading-history-tip, .no-more-tip, .empty-search-tip {
+    text-align: center;
+    padding: 15px 0;
+    font-size: 12px;
+    color: #909399;
+    font-style: italic;
+  }
+
+  .loading-history-tip i {
+    margin-right: 5px;
+  }
+}
+
+.main-chat-area {
+  padding-top: 50px;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  position: relative;
+
+  .close-btn-wrapper {
+    width: 24px;
+    height: 24px;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    z-index: 10;
+    cursor: pointer;
+    background: url("~@/assets/img/close.png");
+    background-size: 100% 100%;
+  }
+
+  .message-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 20px 60px;
+    scroll-behavior: smooth;
+    display: flex;
+    flex-direction: column;
+
+    .welcome-screen {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-end;
+      animation: fadeIn 0.5s ease;
+      width: 100%;
+      min-height: 0;
+
+      .welcome-content {
+        text-align: center;
+        margin-bottom: 24px;
+        flex-shrink: 0;
+
+        .welcome-logo {
+          width: 120px;
+          height: 100px;
+          margin-bottom: 12px;
+        }
+
+        .welcome-desc {
+          margin: 0 auto;
+          font-family: PingFangSC, PingFang SC;
+          font-weight: 400;
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.65);
+          line-height: 1.5;
+          text-align: center;
+          max-width: 600px;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+      }
+
+      .faq-section {
+        width: 100%;
+        flex-shrink: 0;
+
+        .faq-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 10px;
+          padding: 0 4px;
+
+          .faq-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: #303133;
+            display: flex;
+            align-items: center;
+
+            img {
+              width: 16px;
+              height: 16px;
+              margin-right: 6px;
+            }
+          }
+
+          .refresh-btn {
+            font-size: 12px;
+            color: #909399;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+
+            &:hover {
+              color: $primary-blue;
+            }
+          }
+        }
+
+        .faq-list {
+          display: flex;
+          gap: 10px;
+          flex-wrap: wrap;
+          width: 100%;
+
+          .faq-item {
+            flex: 0 0 auto;
+            width: 30%;
+            min-width: 100px;
+            max-width: 220px;
+            padding: 8px 12px;
+            background: #fff;
+            border: 1px solid $border-color;
+            border-radius: 20px;
+            font-size: 12px;
+            color: $text-regular;
+            cursor: pointer;
+            transition: all 0.2s;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &:hover {
+              border-color: $primary-blue;
+              color: $primary-blue;
+              background: #ecf5ff;
+              transform: translateY(-2px);
+              box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
+            }
+          }
+        }
+      }
+    }
+
+    .message-container {
+      width: 100%;
+      max-width: 900px;
+      margin: 0 auto;
+      padding-bottom: 20px;
+    }
+
+    .message-item {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 24px;
+      width: 100%;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      &.user {
+        align-items: flex-end;
+
+        .message-bubble {
+          flex-direction: row-reverse;
+
+          .avatar {
+            margin-left: 12px;
+            margin-right: 0;
+          }
+
+          .bubble-content {
+            text-align: left;
+          }
+        }
+
+        .action-bar {
+          margin-left: 0;
+          margin-right: 40px;
+          justify-content: flex-end;
+        }
+      }
+
+      &.assistant {
+        align-items: flex-start;
+
+        .message-bubble {
+          flex-direction: row;
+
+          .avatar {
+            margin-right: 12px;
+            margin-left: 0;
+          }
+        }
+
+        .action-bar {
+          margin-left: 40px;
+          margin-right: 0;
+          justify-content: flex-start;
+        }
+      }
+
+      .message-bubble {
+        display: flex;
+        align-items: flex-start;
+        max-width: 85%;
+
+        .avatar {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          flex-shrink: 0;
+          object-fit: cover;
+        }
+
+        .bubble-content {
+          flex: 1;
+          font-family: PingFangSC, PingFang SC;
+          font-size: 15px;
+          line-height: 1.6;
+          color: #303133;
+          word-break: break-word;
+
+          &.user {
+            background: rgb(222, 236, 255);
+            padding: 12px 16px;
+            border-radius: 12px 12px 2px 12px;
+            box-shadow: 0px 2px 9px 0px rgba(215, 227, 237, 0.5);
+            color: #303133;
+            white-space: pre-wrap;
+          }
+
+          &.assistant {
+            border-radius: 12px 12px 12px 2px;
+            background: transparent;
+            padding: 12px 16px 12px 0;
+
+            ::v-deep .content-fold-container {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      .action-bar {
+        display: flex;
+        gap: 16px;
+        margin-top: 6px;
+
+        .action-icon {
+          font-size: 16px;
+          color: #909399;
+          cursor: pointer;
+          transition: color 0.2s;
+          padding: 4px;
+          border-radius: 4px;
+
+          i {
+            font-size: 14px;
+          }
+
+          &:hover {
+            color: $primary-blue;
+            background-color: #ecf5ff;
+          }
+
+          &.active {
+            color: $primary-blue;
+            font-weight: 600;
+
+            i {
+              transform: scale(1.1);
+            }
+          }
+
+          &.disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+
+            &:hover {
+              background-color: transparent;
+              color: #909399;
+            }
+          }
+
+          &.rotated {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+  }
+
+  .loading-indicator {
+    text-align: left;
+    margin-left: 40px;
+    color: #909399;
+    font-size: 13px;
+    margin-bottom: 20px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .input-area {
+    padding: 20px 60px 30px;
+    background: #fff;
+    flex-shrink: 0;
+
+    .input-box {
+      border: 1px solid $border-color;
+      border-radius: 12px;
+      padding: 12px;
+      background: #fff;
+      transition: border-color 0.3s, box-shadow 0.3s;
+      position: relative;
+
+      &:focus-within {
+        border-color: $primary-blue;
+        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+      }
+
+      .custom-input {
+        ::v-deep textarea {
+          border: none;
+          resize: none;
+          padding: 0;
+          font-size: 15px;
+          max-height: 150px;
+          line-height: 1.5;
+
+          &:focus {
+            box-shadow: none;
+          }
+        }
+      }
+
+      .input-tools {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        margin-top: 10px;
+      }
+
+      .left-tools {
+        display: flex;
+        gap: 10px;
+
+        .upload-trigger {
+          position: relative;
+          cursor: pointer;
+
+          input[type="file"] {
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+          }
+        }
+
+        .tool-icon {
+          font-size: 18px;
+          color: #909399;
+          cursor: pointer;
+          padding: 6px;
+          border-radius: 6px;
+
+          &:hover {
+            background: #f5f7fa;
+            color: #303133;
+          }
+
+          &.tool-icon-disabled {
+            cursor: not-allowed;
+            color: #C0C4CC;
+
+            &:hover {
+              background: transparent;
+            }
+          }
+        }
+      }
+
+      .left-tools:after {
+        position: relative;
+        content: "";
+        left: 2px;
+        top: 5px;
+        width: 1px;
+        height: 20px;
+        background: rgba(0, 0, 0, 0.08);
+      }
+
+      .send-btn {
+        width: auto;
+        min-width: 36px;
+        height: 36px;
+        background: $primary-blue;
+        border: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        padding: 0 12px;
+        margin-left: 20px;
+        transition: all 0.2s ease;
+
+        &:hover {
+          background: #66b1ff;
+        }
+
+        &:disabled {
+          background: #dcdfe6;
+        }
+      }
+    }
+
+    .file-list {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: 10px;
+
+      .file-item {
+        padding: 8px 12px 8px 24px;
+        background: #f5f7fa;
+        border: 1px solid #e4e7ed;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        font-size: 13px;
+        color: $text-regular;
+        position: relative;
+        max-width: 300px;
+        animation: fadeIn 0.3s ease;
+
+        .close_icon {
+          position: absolute;
+          right: 6px;
+          top: 6px;
+          cursor: pointer;
+          color: #909399;
+          font-size: 14px;
+          padding: 2px;
+          border-radius: 50%;
+
+          &:hover {
+            color: #F56C6C;
+            background: #fff;
+          }
+        }
+
+        .file-info {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+          padding-right: 20px;
+          width: 100%;
+
+          strong {
+            font-weight: 500;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: block;
+            max-width: 240px;
+          }
+
+          .status {
+            font-size: 12px;
+            color: #909399;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+
+            &.completed {
+              color: #67C23A;
+            }
+
+            &.error {
+              color: #F56C6C;
+            }
+
+            &.uploading {
+              color: #E6A23C;
+            }
+          }
+
+          .progress-bar {
+            width: 100%;
+            height: 4px;
+            background: #e4e7ed;
+            border-radius: 2px;
+            overflow: hidden;
+
+            .progress {
+              height: 100%;
+              background: #67C23A;
+              transition: width 0.3s;
+            }
+          }
+        }
+      }
+    }
+
+    .footer-disclaimer {
+      text-align: center;
+      font-size: 12px;
+      color: #C0C4CC;
+      margin-top: 10px;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>