feat:样式调整

.env.dev

@@ -7,7 +7,7 @@ VITE_BASE_PATH=/ai/
 VITE_SSE_PATH=/agentService
 
 # API基础路径
-VITE_API_BASE_PATH=''
+VITE_API_BASE_PATH='/pedapi'
 
 # 应用代码
 VITE_APP_CODE=ped.qywx

src/views/components/AiChat.vue

@@ -54,10 +54,6 @@
               <!-- 思考过程框 -->
               <div v-if="item.hasThinkBox" class="think-box-wrapper">
                 <div :class="['think-box-toggle', item.thinkBoxExpanded ? 'expanded' : 'collapsed']" @click="toggleThinkBox(index, i)">
-                  <component 
-                    :is="item.thinkBoxExpanded ? UpOutlined : DownOutlined" 
-                    class="toggle-icon"
-                  />
                   <div v-if="item.thinkingTimeText" class="thinking-loading">
                     <span class="thinking-text">{{ item.thinkingTimeText }}</span>
                     <div v-if="item.thinkingTimeText === '正在思考中'" class="loading-dots">
@@ -66,6 +62,10 @@
                       <span class="dot"></span>
                     </div>
                   </div>
+                  <component 
+                    :is="item.thinkBoxExpanded ? UpOutlined : DownOutlined" 
+                    class="toggle-icon"
+                  />
                 </div>
                 <div :class="['think-box-content', item.thinkBoxExpanded ? 'expanded' : 'collapsed']"
                   v-html="templateService.generateThinkingTemplate(item.thinkContent || '')"></div>
@@ -171,7 +171,10 @@ const currentBlockIndex = ref(-1);
 const hasStartedConversation = ref(false); // 添加对话开始状态
 
 // SSE消息处理函数
-const handleSSEMessage = (data: SSEData) => {
+const handleSSEMessage = (data: SSEData, isSimulated: boolean = false) => {
+  if (isSimulated) {
+    loading.value = false
+  }
   try {
     console.log('Received SSE message:', data);
 
@@ -357,18 +360,6 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = {
   // 开始对话
   startConversation();
 
-  // 检查SSE连接状态，如果连接断开则触发重连
-  const connectionState = sseService.getConnectionState();
-  console.log('SSE连接状态:', connectionState);
-  
-  // EventSource readyState: 0=CONNECTING, 1=OPEN, 2=CLOSED
-  if (connectionState === 2) { // 连接已关闭
-    console.log('💡 检测到SSE连接已断开，触发重连');
-    if (dialogSessionId.value) {
-      sseService.reconnectSSE(dialogSessionId.value);
-    }
-  }
-
   isAIResponding.value = false;
   isInThinkingMode.value = false;
   currentAIResponse.value = null;
@@ -421,6 +412,21 @@ const sendMessage = async (type: MessageType = 'text', params: MessageParams = {
 
   await nextTick();
   scrollToBottom();
+  // 检查SSE连接状态，如果连接断开或连接中则触发重连
+  const connectionState = sseService.getConnectionState();
+  console.log('SSE连接状态:', connectionState);
+  
+  // EventSource readyState: 0=CONNECTING, 1=OPEN, 2=CLOSED
+  if (connectionState === 2) { // 连接已关闭
+    sseService.reconnectSSE(dialogSessionId.value);
+      const simulatedMessage = {
+      message: '检测到SSE连接错误，触发重连',  
+      status: -1, // 错误状态
+      type: 0 // 错误类型
+    };
+    // 调用handleSSEMessage处理模拟消息
+    return handleSSEMessage(simulatedMessage, true);
+  }
 
   try {
       // 调用外部传入的消息发送函数

src/views/components/ChartComponent.vue

 <template>
   <div class="chart-container">
+    <div class="tips">
+        我是一段描述文字，用于介绍图表数据。
+    </div>
     <!-- 图表类型选择器 -->
     <div class="chart-controls">
       <div class="chart-type-selector">
@@ -329,13 +332,16 @@ onMounted(() => {
 });
 </script>
 
-<style scoped>
+<style lang="less" scoped>
 .chart-container {
   border-radius: 8px;
   background-color: #fff;
   overflow: hidden;
   width: 100% !important;
   max-width: 100% !important;
+  .tips {
+    margin-bottom: 8px;
+  }
 }
 
 .chart-controls {

src/views/components/TableComponent.vue

@@ -12,23 +12,21 @@
         :scroll="{ x: 'max-content' }"
         :pagination="{
           pageSize: 15,
-          total: processedTableData.value?.length || 0
+          total: processedTableData?.length || 0,
+          showTotal: (total) => `共${total}条记录`,
         }"
         class="data-table"
       >
         <!-- 自定义单元格渲染 -->
         <template #bodyCell="{ column, text, record }">
           <div :class="getCellClass(column.dataIndex)">
-            {{ renderCellContent(column.dataIndex, text) }}
+            {{ renderCellContent(column.dataIndex, text) || '-' }}
           </div>
         </template>
       </a-table>
     </div>
     
-    <!-- 表格页脚 -->
-    <div v-if="showFooter" class="table-footer">
-      共 <span>{{ processedTableData?.length || 0 }}</span> 条记录
-    </div>
+
   </div>
 </template>
 
@@ -43,7 +41,6 @@ interface TableData {
 }
 
 interface TableConfig {
-  showFooter?: boolean;
   title?: string;
 }
 
@@ -55,7 +52,6 @@ interface Props {
 // 组件属性定义
 const props = withDefaults(defineProps<Props>(), {
   config: () => ({
-    showFooter: true,
     title: '数据表格',
     dimFields: [],
     indexFields: []
@@ -84,10 +80,6 @@ const tableTitle = computed(() => {
   return props.config.title || '数据表格';
 });
 
-// 是否显示页脚
-const showFooter = computed(() => {
-  return props.config.showFooter !== false;
-});
 
 // 获取表头列配置
 const tableColumns = computed(() => {
@@ -119,6 +111,15 @@ const isNumericColumn = (header: string) => {
   return indexFields.includes(header);
 };
 
+// 判断是否为文本列
+const isTextColumn = (header: string) => {
+  // 直接从传入的数据中获取dimFields
+  const dimFields = props.tableData?.dimFields || [];
+  
+  // 只通过dimFields来判断文本列
+  return dimFields.includes(header);
+};
+
 // 判断列是否为趋势列
 const isTrendColumn = (header: string) => {
   return header.toLowerCase().includes('趋势') || header.toLowerCase().includes('trend');
@@ -130,8 +131,10 @@ const getColumnAlign = (header: string) => {
     return 'center';
   } else if (isNumericColumn(header)) {
     return 'right';
-  } else {
+  } else if (isTextColumn(header)) {
     return 'left';
+  } else {
+    return 'center';
   }
 };
 
@@ -200,7 +203,6 @@ const renderCellContent = (header: string, value: any) => {
   width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  border-bottom: 1px solid #f0f0f0;
 }
 
 .data-table {

src/views/components/style.less

@@ -18,6 +18,8 @@
 @gray-5: #999999;
 @gray-6: #666666;
 @gray-7: #323232;
+@gray-8:#646566;
+@gray-9:#222629;
 @success-color: #52c41a;
 @error-color: #f5222d;
 @warning-color: #faad14;
@@ -134,11 +136,10 @@ li {
   // 聊天头部样式
   .chat-header {
     display: flex;
-    justify-content: center;
     align-items: center;
     border-bottom: 1px solid #e8f2f1; // 保持灰色系
     background: #FCFCFC; // 保持灰色系
-    padding: 10px 20px;
+    padding: 10px 12px;
 
     .header-avatar {
       width: 36px;
@@ -262,7 +263,6 @@ li {
     max-width: 100%;
   }
 }
-
 .message-content {
   padding: 10px;
   border-radius: 8px;
@@ -281,10 +281,12 @@ li {
 }
 
 .message.received .message-content {
-  background-color: @blue-light-1;
+  background-color:none;
   border-top-left-radius: 5px;
   color: @gray-7;
-  border: 1px solid @blue-light-3;
+  border: none;
+  padding: 0;
+  box-shadow:none;
 }
 
 .message.sent .message-content {
@@ -321,7 +323,6 @@ li {
 
 // 思考框样式
 :deep(.think-box-toggle) {
-  color: @primary-color;
   cursor: pointer;
   font-size: 14px;
   text-decoration: none;
@@ -407,7 +408,7 @@ li {
     max-height: 20000px; // 设置足够大的高度
     opacity: 1;
     transform: translateY(0);
-    margin-top: 8px;
+    margin: 16px 0;
     transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); // 平滑展开
   }
   
@@ -423,10 +424,11 @@ li {
   .think-content {  
     font-size: 14px;
     color: @gray-5;
-    padding: 12px 0;
     opacity: 0;
     transform: translateY(5px);
     transition: opacity 0.3s ease-in-out 0.1s, transform 0.3s ease-in-out 0.1s;
+    padding-left:8px;
+    border-left: 1px solid #C8C9CC;
   }
   
   &.expanded .think-content {
@@ -884,12 +886,12 @@ li {
   box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
   border-radius: 8px 8px 0 0;
   position: relative;
-    background-color: @blue-light-2;
-    border-bottom: 1px solid @blue-light-3;
-    font-size: 14px;
-    color: @gray-7;
-    font-weight: 500;
-    line-height: 1.4;
+  background-color: @blue-light-2;
+  border-bottom: 1px solid @blue-light-3;
+  font-size: 14px;
+  color: @gray-7;
+  font-weight: 500;
+  line-height: 1.4;
 }
 .message-inner-box:has(.message-tips) + .message-inner-box :deep(.message-markdown) {
   margin: -1px 0 8px ;
@@ -904,17 +906,17 @@ li {
   max-width: 100%;
   margin:8px 0;
   border-radius:8px;
-  background-color: @white;
-  border: 1px solid @blue-light-3;
-  border-top: 1px solid @blue-light-3;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  // background-color: @white;
+  // border: 1px solid @blue-light-3;
+  // border-top: 1px solid @blue-light-3;
+  // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   
   .markdown-content {
-    padding: 12px 16px;
+    // padding: 12px 16px;
     font-size: 14px;
     line-height: 1.6;
-    color: @gray-7;
+    color: @gray-9;
     background: none;
     white-space: initial;
 
@@ -927,7 +929,7 @@ li {
     h6 {
       margin-bottom: 8px;
       font-weight: 600;
-      color: @gray-7;
+      color: @gray-9;
       line-height: 1.3;
       background: none;
     }
@@ -986,7 +988,7 @@ li {
       code {
         background: none;
         padding: 0;
-        color: @gray-7;
+        color: @gray-9;
         font-size: 13px;
         line-height: 1.4;
       }
@@ -1207,7 +1209,6 @@ li {
   :deep(.message-markdown) {
     .markdown-content {
       font-size: 13px;
-      padding: 10px 12px;
 
       h1 {
         font-size: 18px;

src/views/components/utils/contentTemplateService.ts

@@ -398,7 +398,7 @@ export class ContentTemplateService {
             updatedBlockIndex = updatedResponse.contentBlocks.length;
             updatedResponse.contentBlocks.push({
               content: '',
-              thinkContent: messageContent ? `${messageContent}` : '正在分析您的问题...',
+              thinkContent: messageContent ? `${messageContent}` : '',
               hasThinkBox: true,
               thinkBoxExpanded: false,
               thinkingTime: 0,

src/views/components/utils/sseService.ts

@@ -51,7 +51,7 @@ export class SSEService {
   // 初始化SSE连接
   public initSSE(dialogSessionId: string): void {
     try {
-      const url = `${this.config.apiBaseUrl}${import.meta.env.VITE_SSE_PATH}/sse/join/${this.config.params?.stage || ''}?app-id=${this.config.params?.appId || ''}&dialog-session-id=${dialogSessionId || ''}`;
+      const url = `${import.meta.env.VITE_SSE_PATH}/sse/join/${this.config.params?.stage || ''}?app-id=${this.config.params?.appId || ''}&dialog-session-id=${dialogSessionId || ''}`;
       this.eventSource = new EventSourcePolyfill(url, {
         headers: {
           Token: this.config.token || '',

src/views/components/utils/utils.ts

@@ -13,40 +13,44 @@ export const formatNumber = (value: any): string => {
   const num = parseFloat(value);
   if (isNaN(num)) return value;
 
-  if (num >= 100000000) {
+  // 处理负数
+  const isNegative = num < 0;
+  const absNum = Math.abs(num);
+
+  if (absNum >= 100000000) {
     // 亿级别
-    const result = num / 100000000;
+    const result = absNum / 100000000;
     const decimalPart = result % 1;
     if (decimalPart === 0) {
-      return result.toString() + '亿';
+      return (isNegative ? '-' : '') + result.toString() + '亿';
     } else {
       // 最多保留两位小数
       const fixedResult = result.toFixed(2);
       // 移除末尾的0
-      return fixedResult.replace(/\.?0+$/, '') + '亿';
+      return (isNegative ? '-' : '') + fixedResult.replace(/\.?0+$/, '') + '亿';
     }
-  } else if (num >= 10000) {
+  } else if (absNum >= 10000) {
     // 万级别
-    const result = num / 10000;
+    const result = absNum / 10000;
     const decimalPart = result % 1;
     if (decimalPart === 0) {
-      return result.toString() + '万';
+      return (isNegative ? '-' : '') + result.toString() + '万';
     } else {
       // 最多保留两位小数
       const fixedResult = result.toFixed(2);
       // 移除末尾的0
-      return fixedResult.replace(/\.?0+$/, '') + '万';
+      return (isNegative ? '-' : '') + fixedResult.replace(/\.?0+$/, '') + '万';
     }
   } else {
     // 小于万
-    const decimalPart = num % 1;
+    const decimalPart = absNum % 1;
     if (decimalPart === 0) {
-      return num.toString();
+      return (isNegative ? '-' : '') + absNum.toString();
     } else {
       // 最多保留两位小数
-      const fixedResult = num.toFixed(2);
+      const fixedResult = absNum.toFixed(2);
       // 移除末尾的0
-      return fixedResult.replace(/\.?0+$/, '');
+      return (isNegative ? '-' : '') + fixedResult.replace(/\.?0+$/, '');
     }
   }
 };

vite.config.js

@@ -29,20 +29,20 @@ export default defineConfig(({ mode }) => {
         ]
       },
       proxy: {
-        // // 同时配置两种路径的代理
-        // '/pedapi': {
-        //   target: apiBaseUrl,
-        //   changeOrigin: true,
-        //   secure: false,
-        //   configure: (proxy, options) => {
-        //     proxy.on('error', (err, req, res) => {
-        //       console.log('代理错误:', err);
-        //     });
-        //     proxy.on('proxyReq', (proxyReq, req, res) => {
-        //       console.log('发送请求到:', options.target);
-        //     });
-        //   }
-        // },
+        // 同时配置两种路径的代理
+        '/pedapi': {
+          target: apiBaseUrl,
+          changeOrigin: true,
+          secure: false,
+          configure: (proxy, options) => {
+            proxy.on('error', (err, req, res) => {
+              console.log('代理错误:', err);
+            });
+            proxy.on('proxyReq', (proxyReq, req, res) => {
+              console.log('发送请求到:', options.target);
+            });
+          }
+        },
         [agentPath]: {
           target: apiBaseUrl,
           changeOrigin: true,