diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index 6fe0577cf9..bb4273695b 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -18,6 +18,7 @@ import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
 import MoreComGroup from '@/custom-component/component-group/MoreComGroup.vue'
 import { XpackComponent } from '@/components/plugin'
 import { useCache } from '@/hooks/web/useCache'
+import QueryGroup from '@/custom-component/component-group/QueryGroup.vue'
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -29,6 +30,7 @@ const dvToolbarMain = ref(null)
 const { canvasStyleData, dvInfo, editMode } = storeToRefs(dvMainStore)
 let scaleEdit = 100
 const { wsCache } = useCache('localStorage')
+const dvModel = 'dataV'
 
 const closeEditCanvasName = () => {
   nameEdit.value = false
@@ -216,6 +218,15 @@ eventBus.on('clearCanvas', clearCanvas)
           >
             <user-view-group></user-view-group>
           </component-group>
+          <component-group
+            :base-width="115"
+            :show-split-line="true"
+            is-label
+            icon-name="dv-filter"
+            title="查询组件"
+          >
+            <query-group :dv-model="dvModel"></query-group>
+          </component-group>
           <component-group is-label :base-width="115" icon-name="dv-text" title="文本">
             <text-group></text-group>
           </component-group>
diff --git a/core/core-frontend/src/custom-component/component-list.ts b/core/core-frontend/src/custom-component/component-list.ts
index 49475e183e..0bc4240068 100644
--- a/core/core-frontend/src/custom-component/component-list.ts
+++ b/core/core-frontend/src/custom-component/component-list.ts
@@ -118,6 +118,10 @@ const list = [
     y: 1,
     sizeX: 72,
     sizeY: 4,
+    style: {
+      width: 400,
+      height: 100
+    },
     request: {
       method: 'GET',
       data: [],
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
index c5d286d835..06b0810679 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@@ -1,6 +1,6 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
-import { toRefs } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { COLOR_PANEL } from '@/views/chart/components/editor/util/chart'
 const { t } = useI18n()
 
@@ -12,6 +12,10 @@ const props = defineProps({
   chart: {
     type: Object,
     required: true
+  },
+  themes: {
+    type: String as PropType<EditorTheme>,
+    default: 'dark'
   }
 })
 const predefineColors = COLOR_PANEL
@@ -23,7 +27,7 @@ const { chart } = toRefs(props)
   <div class="attr-style">
     <el-row class="de-collapse-style">
       <el-collapse v-model="state.styleActiveNames" class="style-collapse">
-        <el-collapse-item themes="light" name="component" :title="t('visualization.module')">
+        <el-collapse-item :themes="themes" name="component" :title="t('visualization.module')">
           <el-form label-position="top">
             <el-form-item class="form-item margin-bottom-8">
               <el-checkbox size="small" v-model="chart.customStyle.component.titleShow">
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 92447bad41..ce25e7374e 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -1436,7 +1436,11 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
           <el-row style="height: calc(100vh - 110px); overflow-y: auto">
             <div class="query-style-tab" v-if="view.type === 'VQuery'">
               <div class="tab-container" style="width: 100%">
-                <el-tabs v-model="tabActiveVQuery">
+                <el-tabs
+                  class="tab-header"
+                  :class="{ dark: themes === 'dark' }"
+                  v-model="tabActiveVQuery"
+                >
                   <el-tab-pane name="style" :label="t('chart.chart_style')"> </el-tab-pane>
                 </el-tabs>
               </div>
diff --git a/core/core-frontend/src/views/data-visualization/index.vue b/core/core-frontend/src/views/data-visualization/index.vue
index 36cd3f5919..d3a138dd3f 100644
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@@ -337,13 +337,15 @@ onUnmounted(() => {
 const previewStatus = computed(() => editMode.value === 'preview')
 
 const commonPropertiesShow = computed(
-  () => curComponent.value && !['UserView', 'GroupArea'].includes(curComponent.value.component)
+  () =>
+    curComponent.value &&
+    !['UserView', 'GroupArea', 'VQuery'].includes(curComponent.value.component)
 )
 const canvasPropertiesShow = computed(
   () => !curComponent.value || ['GroupArea'].includes(curComponent.value.component)
 )
 const viewsPropertiesShow = computed(
-  () => !!(curComponent.value && ['UserView'].includes(curComponent.value.component))
+  () => !!(curComponent.value && ['UserView', 'VQuery'].includes(curComponent.value.component))
 )
 eventBus.on('handleNew', handleNew)
 </script>