perf: data component panel add show component name

@@ -16,7 +16,7 @@ VITE_PUBLIC_PATH = /
 # VITE_PROXY = [["/api","http://localhost:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
 VITE_PROXY = [["/api","https://dev.thingskit.com/api"],["/thingskit-drawio","http://localhost:3000/"]]
 # VITE_PROXY = [["/api","http://121.37.251.8:8080/api"],["/thingskit-drawio","http://localhost:3000/"]]
-# VITE_PROXY = [["/api","http://192.168.10.111:8080/api"],["/thingskit-drawio","http://192.168.10.106:8080/api"]]
+# VITE_PROXY = [["/api","http://192.168.10.136:8080/api"],["/thingskit-drawio","http://192.168.10.136:8080/api"]]
 
 # 实时数据的ws地址
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=

@@ -14,6 +14,7 @@
   const props = defineProps<{
     id: string;
     record: DataSource[];
+    panelName: string;
   }>();
   const { hasPermission } = usePermission();
   const dropMenuList = computed<DropMenu[]>(() => {
@@ -54,37 +55,40 @@
 </script>
 
 <template>
-  <div class="flex justify-between w-full p-5">
-    <div class="flex" :style="{ width: `calc(100% - 60px)` }">
-      <div
-        v-for="(item, index) in props.record"
-        class="box-border truncate"
-        :style="{ width: `${100 / props.record.length}%` }"
-        :key="index"
-      >
-        <Tooltip :title="item.deviceName" placement="topLeft">
-          <div class="flex p-1">
-            <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
-            <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
-          </div>
-        </Tooltip>
+  <div>
+    <div class="text-center pt-5 px-5 pb-3 font-bold text-lg">{{ props.panelName || '' }}</div>
+    <div class="flex justify-between w-full px-5 pb-5">
+      <div class="flex" :style="{ width: `calc(100% - 60px)` }">
+        <div
+          v-for="(item, index) in props.record"
+          class="box-border truncate"
+          :style="{ width: `${100 / props.record.length}%` }"
+          :key="index"
+        >
+          <Tooltip :title="item.deviceName" placement="topLeft">
+            <div class="flex p-1">
+              <!-- <SvgIcon name="" prefix="iconfont" class="!fill-emerald-400" /> -->
+              <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
+            </div>
+          </Tooltip>
+        </div>
+      </div>
+      <div class="flex items-center gap-5">
+        <slot name="moreAction"></slot>
+        <Dropdown
+          v-if="dropMenuList.length"
+          :drop-menu-list="dropMenuList"
+          :trigger="['click']"
+          @menu-event="handleMenuEvent"
+        >
+          <Tooltip title="更多">
+            <MoreOutlined
+              v-if="!getIsSharePage"
+              class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
+            />
+          </Tooltip>
+        </Dropdown>
       </div>
-    </div>
-    <div class="flex items-center gap-5">
-      <slot name="moreAction"></slot>
-      <Dropdown
-        v-if="dropMenuList.length"
-        :drop-menu-list="dropMenuList"
-        :trigger="['click']"
-        @menu-event="handleMenuEvent"
-      >
-        <Tooltip title="更多">
-          <MoreOutlined
-            v-if="!getIsSharePage"
-            class="transform rotate-90 cursor-pointer w-4.5 h-4.5 text-lg"
-          />
-        </Tooltip>
-      </Dropdown>
     </div>
   </div>
 </template>

@@ -32,7 +32,7 @@ export const basicSchema: FormSchema[] = [
     field: BasicConfigField.NAME,
     label: '组件名称',
     component: 'Input',
-    rules: [{ required: true, message: '组件名称为必填项' }],
+    // rules: [{ required: true, message: '组件名称为必填项' }],
     componentProps: {
       placeholder: '请输入组件名称',
     },

@@ -443,6 +443,7 @@
                 <BaseWidgetHeader
                   :record="item.record.dataSource"
                   :id="item.record.id"
+                  :panel-name="item.record.name"
                   @action="handleMoreAction"
                 >
                   <template #moreAction>