refactor: 优化过滤组件置顶样式

core/core-frontend/src/locales/en.ts

@@ -2886,6 +2886,11 @@ export default {
     column_name: 'Field name'
   },
   visualization: {
+    filter_freeze_tips:
+      'A pinned query component already exists. Confirm switching to this component?',
+    query_position: 'Query Component Position',
+    default: 'Default',
+    to_top: 'Pin to Top',
     publish_recover: 'Revert to the published version',
     publish_tips1: 'Visible after publication',
     publish_tips2: 'Available after publication {0}',

core/core-frontend/src/locales/tw.ts

@@ -2807,6 +2807,10 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    filter_freeze_tips: '已存在置頂查詢組件，確定切換該組件？',
+    query_position: '查詢組件位置',
+    default: '預設',
+    to_top: '置頂',
     publish_recover: '恢復到發佈版本',
     publish_tips1: '發佈後可查看',
     publish_tips2: '發佈後可{0}',

core/core-frontend/src/locales/zh-CN.ts

@@ -2813,6 +2813,10 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    filter_freeze_tips: '已存在置顶查询组件,确定切换该组件？',
+    query_position: '查询组件位置',
+    default: '默认',
+    to_top: '置顶',
     publish_recover: '恢复到发布版本',
     publish_tips1: '发布后可查看',
     publish_tips2: '发布后可{0}',

core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue

@@ -1,5 +1,5 @@
 <script lang="tsx" setup>
-import { ElMessage } from 'element-plus-secondary'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import icon_bold_outlined from '@/assets/svg/icon_bold_outlined.svg'
 import { uploadFileResult } from '@/api/staticResource'
 import icon_italic_outlined from '@/assets/svg/icon_italic_outlined.svg'
@@ -117,13 +117,40 @@ const currentSearch = ref({
   queryConditionWidth: 227
 })
 
-const onFreezeChange = () => {
+const onFreezeChange = newVal => {
   if (element.value.freeze) {
+    let historyFreezeCount = 0
     dvMainStore.componentData.forEach(item => {
       if (item.innerType === 'VQuery' && item.id !== element.value.id && item.freeze) {
-        item.freeze = false
+        historyFreezeCount++
       }
     })
+    if (historyFreezeCount) {
+      ElMessageBox.confirm(t('visualization.filter_freeze_tips'), {
+        confirmButtonType: 'primary',
+        type: 'warning',
+        confirmButtonText: t('common.sure'),
+        cancelButtonText: t('common.cancel'),
+        autofocus: false,
+        showClose: false
+      })
+        .then(() => {
+          dvMainStore.componentData.forEach(item => {
+            if (item.innerType === 'VQuery' && item.id !== element.value.id && item.freeze) {
+              item.freeze = false
+            }
+          })
+        })
+        .catch(() => {
+          element.value.freeze = false
+        })
+    } else {
+      dvMainStore.componentData.forEach(item => {
+        if (item.innerType === 'VQuery' && item.id !== element.value.id && item.freeze) {
+          item.freeze = false
+        }
+      })
+    }
   }
 }
 
@@ -262,16 +289,6 @@ const onTitleChange = () => {
       <el-collapse v-model="styleActiveNames" class="style-collapse">
         <el-collapse-item :effect="themes" name="basicStyle" :title="t('chart.basic_style')">
           <el-form @keydown.stop.prevent.enter label-position="top">
-            <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
-              <el-checkbox
-                :effect="themes"
-                size="small"
-                v-model="element.freeze"
-                @change="onFreezeChange"
-              >
-                {{ t('visualization.freeze_top') }}
-              </el-checkbox>
-            </el-form-item>
             <el-form-item class="form-item margin-bottom-8" :class="'form-item-' + themes">
               <el-checkbox
                 :effect="themes"
@@ -309,6 +326,25 @@ const onTitleChange = () => {
                 :predefine="COLOR_PANEL"
               />
             </el-form-item>
+            <el-form-item
+              class="form-item margin-bottom-8"
+              :class="'form-item-' + themes"
+              :label="t('visualization.query_position')"
+            >
+              <el-radio-group
+                v-model="element.freeze"
+                :effect="themes"
+                size="small"
+                @change="onFreezeChange"
+              >
+                <el-radio :effect="themes" style="min-width: 80px" :label="true">{{
+                  t('visualization.to_top')
+                }}</el-radio>
+                <el-radio :effect="themes" style="min-width: 80px" :label="false">{{
+                  t('visualization.default')
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
             <background-overall-common
               :common-background-pop="commonBackgroundPop"
               :themes="themes"