diff --git a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
index b9d472b048..42224029e5 100644
--- a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
+++ b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
@@ -1,10 +1,17 @@
 <script lang="tsx" setup>
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
+defineProps({
+  themes: {
+    type: String,
+    default: 'light'
+  }
+})
 </script>
 
 <template>
-  <div class="view-panel-Mask">
+  <div class="view-panel-mask-left"></div>
+  <div class="view-panel-mask">
     <el-popover
       :visible="true"
       placement="bottom"
@@ -16,28 +23,42 @@ const { t } = useI18n()
         <p class="constant">{{ t('visualization.template_view_tips') }}</p>
       </div>
       <template #reference>
-        <div class="view-panel-mask-inner"></div>
+        <div
+          class="view-panel-mask-inner"
+          :class="{ 'view-panel-mask-inner-dark': themes === 'dark' }"
+        ></div>
       </template>
     </el-popover>
   </div>
 </template>
 
 <style lang="less" scoped>
-.view-panel-Mask {
+.view-panel-mask-left {
   height: 100%;
-  width: 100%;
+  width: 240px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  cursor: not-allowed;
+  background-color: rgba(31, 35, 41);
+  opacity: 0.4;
+  z-index: 2;
+}
+.view-panel-mask {
+  height: 100%;
+  width: 178px;
   background-color: rgba(31, 35, 41);
   opacity: 0.4;
   position: absolute;
   top: 0;
-  left: 0;
+  left: 240px;
   z-index: 2;
   cursor: not-allowed;
   pointer-events: none;
 }
 .view-panel-mask-inner {
   top: 51px;
-  left: 246px;
+  left: 6px;
   height: 34px;
   width: 170px;
   background: white;
@@ -45,6 +66,10 @@ const { t } = useI18n()
   pointer-events: none;
   border-radius: 5px;
 }
+
+.view-panel-mask-inner-dark {
+  background: rgba(31, 35, 41);
+}
 </style>
 
 <style lang="less">
@@ -52,8 +77,9 @@ const { t } = useI18n()
   z-index: 1000 !important;
   padding: 24px !important;
   box-shadow: none !important;
-  border: 0px !important;
+  border: 0 !important;
   background: var(--ed-color-primary) !important;
+  inset: 0 auto auto -5px !important;
   .ed-popper__arrow::before {
     border: 1px solid var(--ed-color-primary) !important;
     background: var(--ed-color-primary) !important;
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 81ab051788..fa8bb096bc 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -3828,7 +3828,7 @@ const deleteChartFieldItem = id => {
         </div>
       </el-row>
     </template>
-    <chart-template-info v-if="templateStatusShow"></chart-template-info>
+    <chart-template-info v-if="templateStatusShow" :themes="themes"></chart-template-info>
     <!--显示名修改-->
     <el-dialog
       v-model="state.renameItem"
@@ -5082,6 +5082,7 @@ span {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
+  z-index: 1000;
   border-top: 1px solid rgba(255, 255, 255, 0.15);
 }
 .style-collapse {