fix(Browser): Styles compatible with older versions of Chromium-based…

frontend/package.json

@@ -59,15 +59,20 @@
     "@vitejs/plugin-legacy": "^6.1.1",
     "@vitejs/plugin-vue": "^5.2.2",
     "@vue/tsconfig": "^0.7.0",
+    "autoprefixer": "^10.5.2",
     "axios": "^1.8.4",
     "crypto-js": "^4.2.0",
+    "css-has-pseudo": "^8.0.0",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.4.1",
     "eslint-plugin-vue": "^10.2.0",
+    "flex-gap-polyfill": "^5.0.0",
     "globals": "^16.2.0",
     "less": "4.4.2",
     "pinia": "^3.0.2",
+    "postcss": "^8.5.16",
+    "postcss-preset-env": "^11.3.2",
     "prettier": "^3.5.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.34.0",
@@ -78,4 +83,4 @@
     "vite-svg-loader": "^5.1.0",
     "vue-tsc": "^2.2.8"
   }
-}
+}

frontend/postcss.config.ts

@@ -0,0 +1,14 @@
+import autoprefixer from 'autoprefixer'
+import postcssPresetEnv from 'postcss-preset-env'
+import cssHasPseudo from 'css-has-pseudo'
+
+export default {
+  plugins: [
+    cssHasPseudo({ preserve: true }),
+    autoprefixer(),
+    postcssPresetEnv({
+      stage: 3,
+      browsers: 'Chrome 81',
+    }),
+  ],
+}

frontend/src/main.ts

@@ -1,4 +1,6 @@
 import 'core-js/features/object/has-own'
+// @ts-ignore: css-has-pseudo/browser lacks official type definitions
+import cssHasPseudo from 'css-has-pseudo/browser'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
@@ -9,6 +11,26 @@ import { i18n } from './i18n'
 import VueDOMPurifyHTML from 'vue-dompurify-html'
 
 // import 'element-plus/dist/index.css'
+cssHasPseudo(document)
+
+function supportsFlexGap() {
+  const flex = document.createElement('div')
+  flex.style.display = 'flex'
+  flex.style.flexDirection = 'column'
+  flex.style.rowGap = '1px'
+
+  flex.appendChild(document.createElement('div'))
+  flex.appendChild(document.createElement('div'))
+
+  document.body.appendChild(flex)
+  const isSupported = flex.scrollHeight === 1
+  document.body.removeChild(flex)
+
+  return isSupported
+}
+
+document.documentElement.setAttribute('data-no-flex-gap', String(!supportsFlexGap()))
+
 const app = createApp(App)
 const pinia = createPinia()
 

frontend/src/style.less

@@ -1,3 +1,23 @@
+/* ==========================================
+   老旧浏览器 Flex Gap 完美物理隔离补丁
+   ========================================== */
+
+/* 1. 当浏览器【不支持 flex gap】时，激活此特定命名空间 */
+:root[data-no-flex-gap='true'] .flex-gap-fallback {
+  display: flex;
+}
+
+/* 2. 仅对标记了该 class 的容器下的【相邻子元素】水平方向加间距 */
+:root[data-no-flex-gap='true'] .flex-gap-fallback > * + * {
+  margin-left: var(--gap-size, 16px); /* 默认 16px，可通过变量动态修改 */
+}
+
+/* 3. 如果需要处理垂直排列（flex-direction: column） */
+:root[data-no-flex-gap='true'] .flex-gap-fallback.flex-col > * + * {
+  margin-left: 0;
+  margin-top: var(--gap-size, 16px);
+}
+
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

frontend/src/views/chat/ChatList.vue

@@ -200,7 +200,7 @@ const handleConfirmPassword = () => {
 
 <template>
   <el-scrollbar ref="chatListRef">
-    <div class="chat-list-inner">
+    <div class="chat-list-inner flex-gap-fallback flex-col">
       <div v-for="group in computedChatList" :key="group.key" class="group">
         <div
           class="group-title"
@@ -301,6 +301,7 @@ const handleConfirmPassword = () => {
   display: flex;
   flex-direction: column;
 
+  --gap-size: 16px;
   gap: 16px;
 
   .group {

frontend/src/views/chat/ChatListContainer.vue

@@ -218,7 +218,10 @@ function onChatRenamed(chat: Chat) {
 
 <template>
   <el-container class="chat-container-right-container">
-    <el-header class="chat-list-header" :class="{ 'in-popover': inPopover }">
+    <el-header
+      class="chat-list-header flex-gap-fallback flex-col"
+      :class="{ 'in-popover': inPopover }"
+    >
       <div v-if="!inPopover" class="title">
         <div>{{ appName || t('qa.title') }}</div>
         <el-button link type="primary" class="icon-btn" @click="onClickSideBarBtn">
@@ -296,6 +299,7 @@ function onChatRenamed(chat: Chat) {
     align-items: center;
     justify-content: center;
     flex-direction: column;
+    --gap-size: 16px;
     gap: 16px;
 
     .title {

frontend/src/views/chat/ChatRow.vue

@@ -19,8 +19,8 @@ const appearanceStore = useAppearanceStoreWithOut()
 </script>
 
 <template>
-  <div class="chat-row-container">
-    <div class="chat-row" :class="{ 'right-to-left': msg.role === 'user' }">
+  <div class="chat-row-container flex-gap-fallback flex-col">
+    <div class="chat-row flex-gap-fallback" :class="{ 'right-to-left': msg.role === 'user' }">
       <div v-if="msg.role === 'assistant'" class="ai-avatar">
         <img
           v-if="!hideAvatar && appearanceStore.getLogin"
@@ -46,6 +46,7 @@ const appearanceStore = useAppearanceStoreWithOut()
 .chat-row-container {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   width: 100%;
   max-width: 800px;
@@ -54,6 +55,7 @@ const appearanceStore = useAppearanceStoreWithOut()
     display: flex;
     flex-direction: row;
     align-items: flex-start;
+    --gap-size: 8px;
     gap: 8px;
     padding: 20px 0 0;
 

frontend/src/views/chat/RecentQuestion.vue

@@ -38,7 +38,7 @@ defineExpose({
 
 <template>
   <div style="width: 100%; height: 100%">
-    <div v-if="computedQuestions.length > 0 || loading" class="recent-questions">
+    <div v-if="computedQuestions.length > 0 || loading" class="recent-questions flex-gap-fallback flex-col">
       <div class="question-grid-input">
         <div
           v-for="(question, index) in computedQuestions"
@@ -67,6 +67,7 @@ defineExpose({
   line-height: 22px;
   display: flex;
   flex-direction: column;
+  --gap-size: 4px;
   gap: 4px;
 
   .continue-ask {

frontend/src/views/chat/RecommendQuestion.vue

@@ -164,7 +164,7 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
 </script>
 
 <template>
-  <div v-if="computedQuestions.length > 0 || loading" class="recommend-questions">
+  <div v-if="computedQuestions.length > 0 || loading" class="recommend-questions flex-gap-fallback flex-col">
     <template v-if="position === 'chat'">
       <div v-if="firstChat" style="margin-bottom: 8px">{{ t('qa.guess_u_ask') }}</div>
       <div v-else class="continue-ask">{{ t('qa.continue_to_ask') }}</div>
@@ -209,6 +209,7 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop })
   line-height: 22px;
   display: flex;
   flex-direction: column;
+  --gap-size: 4px;
   gap: 4px;
 
   .continue-ask {

frontend/src/views/chat/RecommendQuestionQuick.vue

@@ -153,7 +153,10 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop, getRecomme
 
 <template>
   <div style="width: 100%; height: 100%">
-    <div v-if="computedQuestions.length > 0 || loading" class="recommend-questions">
+    <div
+      v-if="computedQuestions.length > 0 || loading"
+      class="recommend-questions flex-gap-fallback flex-col"
+    >
       <div v-if="loading">
         <el-button style="min-width: unset" type="primary" link loading />
       </div>
@@ -184,6 +187,7 @@ defineExpose({ getRecommendQuestions, id: () => props.recordId, stop, getRecomme
   line-height: 22px;
   display: flex;
   flex-direction: column;
+  --gap-size: 4px;
   gap: 4px;
 
   .continue-ask {

frontend/src/views/chat/answer/BaseAnswer.vue

@@ -90,7 +90,7 @@ onMounted(() => {
         </span>
       </div>
     </el-button>
-    <div v-if="hasReasoning && show" class="reasoning-content">
+    <div v-if="hasReasoning && show" class="reasoning-content flex-gap-fallback flex-col">
       <div v-for="(reason, _index) in reasoningContent" :key="_index" class="reasoning">
         <MdComponent :message="reason" />
       </div>
@@ -142,6 +142,7 @@ onMounted(() => {
     flex-direction: column;
     padding-left: 9px;
     border-left: 1px solid rgba(31, 35, 41, 0.15);
+    --gap-size: 8px;
     gap: 8px;
 
     .reasoning {

frontend/src/views/chat/chat-block/ChartBlock.vue

@@ -403,12 +403,12 @@ function getBaseAxis() {
     class="chart-component-container"
     :class="{ 'full-screen': enlarge }"
   >
-    <div class="header-bar">
+    <div class="header-bar flex-gap-fallback">
       <div class="title">
         {{ chartObject.title }}
       </div>
-      <div class="buttons-bar">
-        <div class="chart-select-container">
+      <div class="buttons-bar flex-gap-fallback">
+        <div class="chart-select-container flex-gap-fallback">
           <el-tooltip effect="dark" :offset="8" :content="t('chat.type')" placement="top">
             <ChartPopover
               v-if="chartTypeList.length > 0"
@@ -438,7 +438,7 @@ function getBaseAxis() {
           </el-tooltip>
         </div>
 
-        <div class="chart-select-container">
+        <div class="chart-select-container flex-gap-fallback">
           <template v-if="currentChartType !== 'table'">
             <el-tooltip
               effect="dark"
@@ -773,6 +773,7 @@ function getBaseAxis() {
 
     align-items: center;
     flex-direction: row;
+    --gap-size: 16px;
     gap: 16px;
 
     .tool-btn {
@@ -839,6 +840,7 @@ function getBaseAxis() {
       flex-direction: row;
       align-items: center;
 
+      --gap-size: 16px;
       gap: 16px;
 
       .divider {
@@ -852,6 +854,7 @@ function getBaseAxis() {
       padding: 3px;
       display: flex;
       flex-direction: row;
+      --gap-size: 4px;
       gap: 4px;
       border-radius: 6px;
 

frontend/src/views/chat/chat-block/UserChat.vue

@@ -39,7 +39,7 @@ const copyCode = () => {
 </script>
 
 <template>
-  <div class="question">
+  <div class="question flex-gap-fallback">
     <span v-if="message?.record?.analysis_record_id" class="prefix-title" @click="clickAnalysis">
       {{ t('qa.data_analysis') }}
     </span>
@@ -64,6 +64,7 @@ const copyCode = () => {
 .question {
   display: flex;
   flex-direction: row;
+  --gap-size: 8px;
   gap: 8px;
   border-radius: 16px;
   min-height: 48px;

frontend/src/views/chat/execution-component/LogChooseTable.vue

@@ -42,13 +42,15 @@ const schema = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
   .inner-item {
     border: 1px solid #dee0e3;
     display: flex;
     flex-direction: column;
+    --gap-size: 8px;
     gap: 8px;
     border-radius: 12px;
     padding: 16px;

frontend/src/views/chat/execution-component/LogCustomPrompt.vue

@@ -32,8 +32,8 @@ const title = computed(() => {
     </template>
     <template v-else>
       <div class="inner-title">{{ title }}</div>
-      <div v-if="list.length > 0" style="margin-top: 8px" class="item-list">
-        <div v-for="(ele, index) in list" :key="index" class="inner-item">
+      <div v-if="list.length > 0" style="margin-top: 8px" class="item-list flex-gap-fallback flex-col">
+        <div v-for="(ele, index) in list" :key="index" class="inner-item flex-gap-fallback flex-col">
           <div v-dompurify-html="ele" class="inner-item-description" />
         </div>
       </div>
@@ -54,13 +54,15 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
   .inner-item {
     border: 1px solid #dee0e3;
     display: flex;
     flex-direction: column;
+    --gap-size: 8px;
     gap: 8px;
     border-radius: 12px;
     padding: 16px;

frontend/src/views/chat/execution-component/LogDataQuery.vue

@@ -47,13 +47,15 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
   .inner-item {
     border: 1px solid #dee0e3;
     display: flex;
     flex-direction: column;
+    --gap-size: 8px;
     gap: 8px;
     border-radius: 12px;
     padding: 16px;

frontend/src/views/chat/execution-component/LogGeneratePicture.vue

@@ -50,13 +50,15 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
   .inner-item {
     border: 1px solid #dee0e3;
     display: flex;
     flex-direction: column;
+    --gap-size: 8px;
     gap: 8px;
     border-radius: 12px;
     padding: 16px;