refactor(仪表板、数据大屏): 嵌入式优化，增加tab,分组等组件id展示

core/core-frontend/src/components/visualization/DvSidebar.vue

@@ -4,13 +4,21 @@ import { ElIcon, ElMessage } from 'element-plus-secondary'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import Icon from '../icon-custom/src/Icon.vue'
 const dvMainStore = dvMainStoreWithOut()
 const { canvasCollapse } = storeToRefs(dvMainStore)
 let componentNameEdit = ref(false)
 let inputComponentName = ref('')
 let componentNameInputAttr = ref(null)
+import dvInfoSvg from '@/assets/svg/dv-info.svg'
+import { useI18n } from '@/hooks/web/useI18n'
 const snapshotStore = snapshotStoreWithOut()
+const { t } = useI18n()
 const props = defineProps({
+  element: {
+    required: false,
+    default: {}
+  },
   scrollWidth: {
     required: false,
     type: Number,
@@ -36,6 +44,7 @@ const props = defineProps({
     type: String,
     default: 'defaultSide'
   },
+
   view: {
     type: Object as PropType<ChartObj>,
     required: false
@@ -115,6 +124,30 @@ const onComponentNameChange = () => {
         @dblclick="editComponentName"
       >
         {{ isViewTitle ? view.title : title }}
+        <el-popover
+          show-arrow
+          :offset="8"
+          :effect="themes"
+          placement="bottom"
+          width="200"
+          trigger="click"
+        >
+          <template #reference>
+            <span>
+              <el-icon
+                v-show="element && element['id']"
+                style="margin: 2px 0 0 4px; cursor: pointer"
+                ><Icon><dvInfoSvg class="svg-icon" /></Icon
+              ></el-icon>
+            </span>
+          </template>
+          <div style="margin-bottom: 4px; font-size: 14px">
+            {{ t('visualization.component_id') }}
+          </div>
+          <div style="font-size: 14px">
+            {{ element['id'] }}
+          </div>
+        </el-popover>
       </div>
       <el-icon
         :title="title"
@@ -262,6 +295,7 @@ const onComponentNameChange = () => {
   font-size: 14px !important;
   overflow: hidden;
   cursor: pointer;
+  display: flex;
   input {
     position: absolute;
     left: 0;

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

@@ -2647,6 +2647,8 @@ Scatter chart (bubble) chart: {a} (series name), {b} (data name), {c} (value arr
     column_name: 'Field name'
   },
   visualization: {
+    component_id: 'Component ID',
+    view_id: 'Chart ID',
     resource_create_tips: 'Select components from the top toolbar and add them here to create.',
     component_select_tips: 'Please elect a component...',
     border_style_dotted: 'Dotted',

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

@@ -2585,6 +2585,8 @@ export default {
     column_name: '欄位名稱'
   },
   visualization: {
+    component_id: '組件ID',
+    view_id: '圖表ID',
     resource_create_tips: '從頂部工具欄中選擇組件，添加到這裡創建。',
     component_select_tips: '請選擇組件...',
     border_style_dotted: '點線',

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

@@ -2587,6 +2587,8 @@ export default {
     column_name: '字段名称'
   },
   visualization: {
+    component_id: '组件ID',
+    view_id: '图表ID',
     resource_create_tips: '从顶部工具栏中选择组件，添加到这里创建',
     component_select_tips: '请选择组件...',
     border_style_dotted: '点线',

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -1914,7 +1914,9 @@ const deleteChartFieldItem = id => {
                       ><Icon><dvInfoSvg class="svg-icon" /></Icon
                     ></el-icon>
                   </template>
-                  <div style="margin-bottom: 4px; font-size: 14px; color: #646a73">图表ID</div>
+                  <div style="margin-bottom: 4px; font-size: 14px; color: #646a73">
+                    {{ t('visualization.view_id') }}
+                  </div>
                   <div style="font-size: 14px; color: #1f2329">
                     {{ view.id }}
                   </div>

core/core-frontend/src/views/dashboard/index.vue

@@ -289,6 +289,7 @@ onUnmounted(() => {
         :side-name="'componentProp'"
         :aside-position="'right'"
         :view="canvasViewInfo[curComponent.id]"
+        :element="curComponent"
         class="left-sidebar"
       >
         <component :is="findComponentAttr(curComponent)" :themes="'light'" />

core/core-frontend/src/views/data-visualization/index.vue

@@ -568,6 +568,8 @@ eventBus.on('tabSort', tabSort)
             :aside-position="'right'"
             class="left-sidebar"
             :slide-index="2"
+            :themes="'dark'"
+            :element="curComponent"
             :view="canvasViewInfo[curComponent.id]"
             :class="{ 'preview-aside': editMode === 'preview' }"
           >