fix(Browser): Styles compatible with older versions of Chromium-based browsers (version 81).

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,6 +42,7 @@ const schema = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -49,6 +50,7 @@ const schema = computed(() => {
     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,6 +54,7 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -61,6 +62,7 @@ const title = computed(() => {
     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,6 +47,7 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -54,6 +55,7 @@ const title = computed(() => {
     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,6 +50,7 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -57,6 +58,7 @@ const title = computed(() => {
     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/LogSQLSample.vue

@@ -33,8 +33,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 class="inner-item-title">
             {{ ele.question }}
           </div>
@@ -58,6 +58,7 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -65,6 +66,7 @@ const title = computed(() => {
     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/LogTerm.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>
             <div v-for="(word, index2) in ele.words" :key="index2" class="inner-item-title">
               {{ word }}
@@ -59,6 +59,7 @@ const title = computed(() => {
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -66,6 +67,7 @@ const title = computed(() => {
     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/LogWithAi.vue

@@ -51,9 +51,9 @@ const recordsBeforeCurrentQuestion = computed(() =>
     <template v-if="item.error">
       {{ error }}
     </template>
-    <div class="item-list">
+    <div class="item-list flex-gap-fallback flex-col">
       <div class="inner-title">{{ t('chat.log_system') }}</div>
-      <div class="inner-item">
+      <div class="inner-item flex-gap-fallback flex-col">
         <div class="inner-item-title">
           {{ systemRecord.type }}
         </div>
@@ -63,7 +63,7 @@ const recordsBeforeCurrentQuestion = computed(() =>
       </div>
       <template v-if="recordsBeforeCurrentQuestion.length > 0">
         <div class="inner-title">{{ t('chat.log_history') }}</div>
-        <div class="inner-item">
+        <div class="inner-item flex-gap-fallback flex-col">
           <div v-for="(ele, index) in recordsBeforeCurrentQuestion" :key="index">
             <div class="inner-item-title">
               {{ ele.type }}
@@ -75,14 +75,14 @@ const recordsBeforeCurrentQuestion = computed(() =>
         </div>
       </template>
       <div class="inner-title">{{ t('chat.log_question') }}</div>
-      <div class="inner-item">
+      <div class="inner-item flex-gap-fallback flex-col">
         <div class="inner-item-description">
           <SQLComponent :sql="lastHumanRecord.content" />
         </div>
       </div>
       <template v-if="lastAiAfterHuman">
         <div class="inner-title">{{ t('chat.log_answer') }}</div>
-        <div class="inner-item">
+        <div class="inner-item flex-gap-fallback flex-col">
           <div class="inner-item-description">
             <SQLComponent :sql="lastAiAfterHuman.content" />
           </div>
@@ -103,6 +103,7 @@ const recordsBeforeCurrentQuestion = computed(() =>
 .item-list {
   display: flex;
   flex-direction: column;
+  --gap-size: 8px;
   gap: 8px;
   align-items: stretch;
   flex-wrap: nowrap;
@@ -110,6 +111,7 @@ const recordsBeforeCurrentQuestion = computed(() =>
     border: 1px solid #dee0e3;
     display: flex;
     flex-direction: column;
+    --gap-size: 8px;
     gap: 8px;
     border-radius: 12px;
     padding: 16px;

frontend/src/views/chat/index.vue

@@ -112,15 +112,15 @@
         }"
       >
         <div v-if="computedMessages.length == 0 && !loading" class="welcome-content-block">
-          <div class="welcome-content">
+          <div class="welcome-content flex-gap-fallback flex-col">
             <template v-if="isCompletePage">
-              <div class="greeting">
+              <div class="greeting flex-gap-fallback">
                 <img v-if="loginBg" height="32" width="32" :src="loginBg" alt="" />
                 <el-icon v-else size="32"
                   ><custom_small v-if="appearanceStore.themeColor !== 'default'"></custom_small>
                   <LOGO_fold v-else></LOGO_fold
                 ></el-icon>
-                {{ appearanceStore.pc_welcome ?? '你好，我是 SQLBot' }}
+                <span>{{ appearanceStore.pc_welcome ?? '你好，我是 SQLBot' }}</span>
               </div>
               <div class="sub">
                 {{
@@ -1390,6 +1390,7 @@ onMounted(() => {
     width: 100%;
     max-width: 800px;
     display: flex;
+    --gap-size: 16px;
     gap: 16px;
     padding: 0 16px;
     align-items: center;
@@ -1428,6 +1429,7 @@ onMounted(() => {
     .greeting {
       display: flex;
       align-items: center;
+      --gap-size: 16px;
       gap: 16px;
       line-height: 32px;
       font-size: 24px;

frontend/src/views/dashboard/components/sq-view/index.vue

@@ -124,12 +124,12 @@ defineExpose({
 
 <template>
   <div class="chart-base-container">
-    <div class="header-bar">
+    <div class="header-bar flex-gap-fallback">
       <div class="title">
         {{ viewInfo.chart.title }}
       </div>
-      <div v-if="showPosition === 'multiplexing'" class="buttons-bar">
-        <div class="chart-select-container">
+      <div v-if="showPosition === 'multiplexing'" class="buttons-bar flex-gap-fallback">
+        <div class="chart-select-container flex-gap-fallback">
           <el-tooltip effect="dark" :content="t('chat.type')" placement="top">
             <ChartPopover
               v-if="chartTypeList.length > 0"
@@ -291,6 +291,7 @@ defineExpose({
       display: flex;
       flex-direction: row;
       align-items: center;
+      --gap-size: 16px;
       gap: 16px;
       margin-right: 36px;
       .divider {
@@ -304,6 +305,7 @@ defineExpose({
       padding: 3px;
       display: flex;
       flex-direction: row;
+      --gap-size: 4px;
       gap: 4px;
       border-radius: 6px;
 
@@ -345,6 +347,7 @@ defineExpose({
   flex-direction: row;
   align-items: center;
 
+  --gap-size: 16px;
   gap: 16px;
 
   .divider {
@@ -358,6 +361,7 @@ defineExpose({
   padding: 3px;
   display: flex;
   flex-direction: row;
+  --gap-size: 4px;
   gap: 4px;
   border-radius: 6px;
 

frontend/src/views/dashboard/editor/DashboardChatList.vue

@@ -78,9 +78,9 @@ const filteredAndGroupedData = computed(() => {
       </template>
     </el-input>
     <el-scrollbar ref="chatListRef" class="custom-chart-list">
-      <div class="chat-list-inner">
+      <div class="chat-list-inner flex-gap-fallback flex-col">
         <!-- today -->
-        <div v-if="filteredAndGroupedData.today.length > 0" class="time-group">
+        <div v-if="filteredAndGroupedData.today.length > 0" class="time-group flex-gap-fallback flex-col">
           <div class="time-group-title">{{ t('dashboard.today') }}</div>
           <div
             v-for="chat in filteredAndGroupedData.today"
@@ -94,7 +94,7 @@ const filteredAndGroupedData = computed(() => {
         </div>
 
         <!-- this week -->
-        <div v-if="filteredAndGroupedData.thisWeek.length > 0" class="time-group">
+        <div v-if="filteredAndGroupedData.thisWeek.length > 0" class="time-group flex-gap-fallback flex-col">
           <div class="time-group-title">{{ t('dashboard.this_week') }}</div>
           <div
             v-for="chat in filteredAndGroupedData.thisWeek"
@@ -108,7 +108,7 @@ const filteredAndGroupedData = computed(() => {
         </div>
 
         <!-- earlier -->
-        <div v-if="filteredAndGroupedData.earlier.length > 0" class="time-group">
+        <div v-if="filteredAndGroupedData.earlier.length > 0" class="time-group flex-gap-fallback flex-col">
           <div class="time-group-title">{{ t('dashboard.earlier') }}</div>
           <div
             v-for="chat in filteredAndGroupedData.earlier"
@@ -149,11 +149,13 @@ const filteredAndGroupedData = computed(() => {
   display: flex;
   flex-direction: column;
 
+  --gap-size: 8px;
   gap: 8px;
 
   .time-group {
     display: flex;
     flex-direction: column;
+    --gap-size: 8px;
     gap: 8px;
     margin-top: 12px;
 

frontend/src/views/ds/index.vue

@@ -27,7 +27,7 @@
       >
     </div>
 
-    <div class="connections-container">
+    <div class="connections-container flex-gap-fallback">
       <template v-for="ds in dsList" :key="ds">
         <DatasourceItemCard :ds="ds">
           <div class="connection-actions">
@@ -142,6 +142,7 @@ onMounted(() => {
 .connections-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+  --gap-size: 24px;
   gap: 24px;
 
   .connection-actions {

frontend/src/views/system/appearance/index.vue

@@ -179,14 +179,14 @@
                         </el-icon>
                       </div>
                     </div>
-                    <div class="welcome-content">
-                      <div class="greeting">
+                    <div class="welcome-content flex-gap-fallback flex-col">
+                      <div class="greeting flex-gap-fallback">
                         <img v-if="pageLogin" height="32" width="32" :src="pageLogin" alt="" />
                         <el-icon v-else size="32"
                           ><custom_small v-if="themeColor !== 'default'"></custom_small>
                           <LOGO_fold v-else></LOGO_fold
                         ></el-icon>
-                        {{ topForm.pc_welcome }}
+                        <span>{{ topForm.pc_welcome }}</span>
                       </div>
                       <div class="sub">
                         {{ topForm.pc_welcome_desc }}
@@ -909,6 +909,7 @@ onUnmounted(() => {
               .welcome-content {
                 width: calc(100% - 240px);
                 display: flex;
+                --gap-size: 16px;
                 gap: 16px;
                 align-items: center;
                 flex-direction: column;
@@ -920,6 +921,7 @@ onUnmounted(() => {
                 .greeting {
                   display: flex;
                   align-items: center;
+                  --gap-size: 16px;
                   gap: 16px;
                   line-height: 32px;
                   font-size: 24px;

frontend/src/views/system/audit/index.vue

@@ -257,7 +257,7 @@ const initOptions = () => {
   <div v-loading="searchLoading" class="professional">
     <div class="tool-left">
       <span class="page-title">{{ $t('audit.system_log') }}</span>
-      <div class="tool-row">
+      <div class="tool-row flex-gap-fallback">
         <el-button secondary @click="exportExcel">
           <template #icon>
             <icon_export_outlined />
@@ -416,6 +416,7 @@ const initOptions = () => {
       display: flex;
       align-items: center;
       flex-direction: row;
+      --gap-size: 8px;
       gap: 8px;
     }
   }

frontend/src/views/system/authentication/index.vue

@@ -2,7 +2,7 @@
   <div class="authentication">
     <p class="router-title">{{ t('system.authentication_settings') }}</p>
     <div v-loading="loading" class="authentication-content">
-      <div class="auth-card-container">
+      <div class="auth-card-container flex-gap-fallback">
         <div v-for="item in showInfos" :key="item.name" class="authentication-card">
           <div class="inner-card">
             <div class="inner-card-info">
@@ -178,6 +178,7 @@ init(true)
     height: initial;
     display: flex;
     flex-wrap: wrap;
+    --gap-size: 16px;
     gap: 16px;
 
     .authentication-card {

frontend/src/views/system/excel-upload/Uploader.vue

@@ -229,7 +229,7 @@ const submitUpload = () => {
     modal-class="user-import-class"
     @close="close"
   >
-    <div class="import-container">
+    <div class="import-container flex-gap-fallback flex-col">
       <div class="down-template">
         <span class="icon-span">
           <el-icon>
@@ -356,6 +356,7 @@ const submitUpload = () => {
 .import-container {
   display: flex;
   flex-direction: column;
+  --gap-size: 16px;
   gap: 16px;
 
   :deep(.ed-upload) {

frontend/src/views/system/excel-upload/UploaderRemark.vue

@@ -185,7 +185,7 @@ const submitUpload = () => {
     modal-class="up-loader_dialog"
     @close="close"
   >
-    <div class="import-container">
+    <div class="import-container flex-gap-fallback flex-col">
       <div class="down-template">
         <span class="icon-span">
           <el-icon>
@@ -307,6 +307,7 @@ const submitUpload = () => {
 .import-container {
   display: flex;
   flex-direction: column;
+  --gap-size: 16px;
   gap: 16px;
 
   :deep(.ed-upload) {

frontend/src/views/system/professional/index.vue

@@ -435,7 +435,7 @@ const changeStatus = (id: any, val: any) => {
   <div v-loading="searchLoading" class="professional">
     <div class="tool-left">
       <span class="page-title">{{ $t('professional.professional_terminology') }}</span>
-      <div class="tool-row">
+      <div class="tool-row flex-gap-fallback">
         <el-input
           v-model="keywords"
           style="width: 240px; margin-right: 12px"
@@ -836,6 +836,7 @@ const changeStatus = (id: any, val: any) => {
       display: flex;
       align-items: center;
       flex-direction: row;
+      --gap-size: 8px;
       gap: 8px;
     }
   }

frontend/src/views/system/prompt/index.vue

@@ -471,7 +471,7 @@ const drawerMainClose = () => {
           {{ $t('prompt.data_prediction') }}
         </el-button>
       </div>
-      <div class="tool-row">
+      <div class="tool-row flex-gap-fallback">
         <el-input
           v-model="keywords"
           style="width: 240px; margin-right: 12px"
@@ -812,6 +812,7 @@ const drawerMainClose = () => {
     display: flex;
     align-items: center;
     flex-direction: row;
+    --gap-size: 8px;
     gap: 8px;
   }
 

frontend/src/views/system/training/index.vue

@@ -356,7 +356,7 @@ const onRowFormClose = () => {
   <div v-loading="searchLoading" class="training">
     <div class="tool-left">
       <span class="page-title">{{ $t('training.data_training') }}</span>
-      <div class="tool-row">
+      <div class="tool-row flex-gap-fallback">
         <el-input
           v-model="keywords"
           style="width: 240px"
@@ -683,6 +683,7 @@ const onRowFormClose = () => {
     display: flex;
     align-items: center;
     flex-direction: row;
+    --gap-size: 8px;
     gap: 8px;
   }
 

frontend/src/views/work/index.vue

@@ -37,7 +37,7 @@ const dialogVisible = ref(false)
       <span class="title">Select data source</span>
       <el-button text @click="dialogVisible = true">View more</el-button>
     </div>
-    <div class="datasource-content">
+    <div class="datasource-content flex-gap-fallback">
       <DatasourceCard
         v-for="ele in datasourceList"
         :key="ele.id"
@@ -62,7 +62,7 @@ const dialogVisible = ref(false)
         placeholder="Please input"
       />
     </div>
-    <div class="datasource-content">
+    <div class="datasource-content flex-gap-fallback">
       <DatasourceCard
         v-for="ele in datasourceListComputed"
         :key="ele.id"
@@ -103,6 +103,7 @@ const dialogVisible = ref(false)
     margin: 12px 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
+    --gap-size: 16px;
     gap: 16px;
   }
 }
@@ -117,6 +118,7 @@ const dialogVisible = ref(false)
   .datasource-content {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
+    --gap-size: 16px;
     gap: 16px;
     margin-top: 16px;
   }