From 49b674495c4cc387aa1d25b5c6aa08b76319fd53 Mon Sep 17 00:00:00 2001
From: rick <LinuxSuRen@users.noreply.github.com>
Date: Fri, 25 Jul 2025 18:33:54 +0800
Subject: [PATCH] chore: using el-splitter on the data manager page

---
 console/atest-ui/package.json              |   2 +-
 console/atest-ui/src/views/DataManager.vue | 134 +++++++++++----------
 2 files changed, 69 insertions(+), 67 deletions(-)

diff --git a/console/atest-ui/package.json b/console/atest-ui/package.json
index 7ea96f91..bf170458 100644
--- a/console/atest-ui/package.json
+++ b/console/atest-ui/package.json
@@ -21,7 +21,7 @@
     "@vueuse/core": "^10.11.0",
     "codemirror": "^5.65.17",
     "diff-match-patch": "^1.0.5",
-    "element-plus": "^2.10.2",
+    "element-plus": "^2.10.4",
     "intro.js": "^7.2.0",
     "jsonlint-mod": "^1.7.6",
     "jsonpath-plus": "^10.3.0",
diff --git a/console/atest-ui/src/views/DataManager.vue b/console/atest-ui/src/views/DataManager.vue
index 3d9d7b50..bea49d56 100644
--- a/console/atest-ui/src/views/DataManager.vue
+++ b/console/atest-ui/src/views/DataManager.vue
@@ -367,72 +367,74 @@ Magic.LoadMagicKeys(import.meta.url, new Map([
         </el-scrollbar>
       </el-aside>
       <el-container>
-        <el-header style="height: auto">
-          <el-form @submit.prevent="executeQuery">
-            <el-row :gutter="10" justify="center">
-              <el-col :span="4">
-                <el-form-item>
-                  <el-select v-model="store" placeholder="Select store" filterable
-                             :loading="loadingStores">
-                    <el-option v-for="item in stores" :key="item.name" :label="item.name"
-                               :value="item.name" :disabled="!item.ready"
-                               :kind="item.kind.name"></el-option>
-                  </el-select>
-                </el-form-item>
-              </el-col>
-              <el-col :span="16">
-                <el-form-item v-if="!complexEditor">
-                  <HistoryInput :placeholder="queryTip" :callback="executeQuery" v-model="sqlQuery" />
-                </el-form-item>
-              </el-col>
-              <el-col :span="2">
-                <el-form-item>
-                  <el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
-                </el-form-item>
-              </el-col>
-              <el-col :span="2">
-                <el-select v-model="dataFormat" placeholder="Select data format">
-                  <el-option v-for="item in dataFormatOptions" :key="item" :label="item"
-                             :value="item"></el-option>
-                </el-select>
-              </el-col>
-            </el-row>
-            <el-row :gutter="10" v-if="kind === 'atest-store-elasticsearch' || kind === 'atest-store-redis'">
-              <el-col :span="10">
-                <el-input type="number" v-model="query.offset">
-                  <template #prepend>Offset</template>
-                </el-input>
-              </el-col>
-              <el-col :span="10">
-                <el-input type="number" v-model="query.limit">
-                  <template #prepend>Limit</template>
-                </el-input>
-              </el-col>
-              <el-col :span="2">
-                <el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
-              </el-col>
-            </el-row>
-          </el-form>
-            <Codemirror
-            @ready="sqlEditorReady"
-            v-model="sqlQuery"
-            v-if="complexEditor"
-            style="height: var(--sql-editor-height);"
-            :extensions="[sql(sqlConfig)]"
-            />
-        </el-header>
-        <el-main>
-          <div style="display: flex; gap: 8px;">
-            <el-tag type="primary" v-if="queryResult.length > 0">{{ queryResult.length }} rows</el-tag>
-            <el-tag type="primary" v-if="queryDataMeta.duration">{{ queryDataMeta.duration }}</el-tag>
-            <el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
-            <el-check-tag type="primary" :checked="showOverflowTooltip" @change="overflowChange" v-if="queryResult.length > 0">overflow</el-check-tag>
-          </div>
-          <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" height="calc(100vh - 380px)" @cell-dblclick="tryShowPrettyJSON">
-            <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable :show-overflow-tooltip="showOverflowTooltip" />
-          </el-table>
-          <Codemirror v-else-if="dataFormat === 'json'" v-model="queryResultAsJSON" />
-        </el-main>
+          <el-splitter layout="vertical">
+              <el-splitter-panel size="30%">
+                  <el-form @submit.prevent="executeQuery">
+                      <el-row :gutter="10" justify="center" style="margin-left: 0!important; margin-right: 0!important;">
+                          <el-col :span="4">
+                              <el-form-item>
+                                  <el-select v-model="store" placeholder="Select store" filterable
+                                             :loading="loadingStores">
+                                      <el-option v-for="item in stores" :key="item.name" :label="item.name"
+                                                 :value="item.name" :disabled="!item.ready"
+                                                 :kind="item.kind.name"></el-option>
+                                  </el-select>
+                              </el-form-item>
+                          </el-col>
+                          <el-col :span="16">
+                              <el-form-item v-if="!complexEditor">
+                                  <HistoryInput :placeholder="queryTip" :callback="executeQuery" v-model="sqlQuery" />
+                              </el-form-item>
+                          </el-col>
+                          <el-col :span="2">
+                              <el-form-item>
+                                  <el-button type="primary" @click="executeQuery" :disabled="kind === ''">Execute</el-button>
+                              </el-form-item>
+                          </el-col>
+                          <el-col :span="2">
+                              <el-select v-model="dataFormat" placeholder="Select data format">
+                                  <el-option v-for="item in dataFormatOptions" :key="item" :label="item"
+                                             :value="item"></el-option>
+                              </el-select>
+                          </el-col>
+                      </el-row>
+                      <el-row :gutter="10" v-if="kind === 'atest-store-elasticsearch' || kind === 'atest-store-redis'">
+                          <el-col :span="10">
+                              <el-input type="number" v-model="query.offset">
+                                  <template #prepend>Offset</template>
+                              </el-input>
+                          </el-col>
+                          <el-col :span="10">
+                              <el-input type="number" v-model="query.limit">
+                                  <template #prepend>Limit</template>
+                              </el-input>
+                          </el-col>
+                          <el-col :span="2">
+                              <el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
+                          </el-col>
+                      </el-row>
+                  </el-form>
+                  <Codemirror
+                      @ready="sqlEditorReady"
+                      v-model="sqlQuery"
+                      v-if="complexEditor"
+                      style="height: var(--sql-editor-height);"
+                      :extensions="[sql(sqlConfig)]"
+                  />
+              </el-splitter-panel>
+              <el-splitter-panel>
+                  <div style="display: flex; gap: 8px;">
+                      <el-tag type="primary" v-if="queryResult.length > 0">{{ queryResult.length }} rows</el-tag>
+                      <el-tag type="primary" v-if="queryDataMeta.duration">{{ queryDataMeta.duration }}</el-tag>
+                      <el-tag type="primary" v-for="label in queryDataMeta.labels">{{ label.value }}</el-tag>
+                      <el-check-tag type="primary" :checked="showOverflowTooltip" @change="overflowChange" v-if="queryResult.length > 0">overflow</el-check-tag>
+                  </div>
+                  <el-table :data="queryResult" stripe v-if="dataFormat === 'table'" @cell-dblclick="tryShowPrettyJSON">
+                      <el-table-column v-for="col in columns" :key="col" :prop="col" :label="col" sortable :show-overflow-tooltip="showOverflowTooltip" />
+                  </el-table>
+                  <Codemirror v-else-if="dataFormat === 'json'" v-model="queryResultAsJSON" />
+              </el-splitter-panel>
+          </el-splitter>
       </el-container>
     </el-container>
   </div>