feat: 表单设计器加入说明，提醒慎用栅格布局

src/components/Designer/src/Designer.vue

@@ -17,8 +17,11 @@
                 <a-collapse-panel
                   v-for="(item, index) in componentList"
                   :key="index + 1"
-                  :header="item.title"
                 >
+                    <template #header>
+                        <span>{{item.title}}</span>
+                        <span class="components-readme" v-if="item.title == '布局型组件'" @click="openCompReadme">注意事项</span>
+                    </template>
                   <ComponentGroup :fields="item.fields" :list="item.list" :isDisabled="!dbValue" />
                 </a-collapse-panel>
               </a-collapse>
@@ -189,6 +192,13 @@
           </a-tab-pane>
         </a-tabs>
       </a-modal>
+      <a-modal v-model:visible="showCompReadme" title="注意事项" @ok="closeCompReadme">
+        <div class="comp-readme-content">
+            因为组件封装的限制，当使用表格布局、选项卡、卡片布局、栅格布局时，会带来一些问题，包括二开嵌套问题、移动端生成代码无法适配等。<br/>
+            无特殊需求时，应该优先使用设计器提供的响应式布局，或者进行源码二开。<br/>
+            源码二开可以复用设计器生成的代码，调整布局、显隐、权限更加方便。
+        </div>
+      </a-modal>
     </a-layout>
   </div>
 </template>
@@ -417,6 +427,7 @@
       const isShowSelectDb = ref(false);
       const tableCell = ref<TableCell>();
       const tableTh = ref<TableTh>();
+      const showCompReadme = ref(false);
       provide('tableCell', tableCell);
       provide('tableTh', tableTh);
 
@@ -571,6 +582,14 @@
         { deep: true },
       );
 
+      function openCompReadme(e) {
+        e.stopPropagation();
+        showCompReadme.value = true;
+      }
+
+      function closeCompReadme() {
+        showCompReadme.value = false;
+      }
       //注册抽屉 获取外部操作抽屉得方法
       const [registerDrawer, { openDrawer }] = useDrawer();
 
@@ -599,6 +618,9 @@
         dbValue,
         tableCell,
         tableTh,
+        showCompReadme,
+        openCompReadme,
+        closeCompReadme
       };
     },
   });
@@ -703,4 +725,15 @@
       padding: 10px;
     }
   }
+
+  .components-readme {
+      position: absolute;
+      right: 38px;
+      color: #c00;
+      cursor: pointer;
+  }
+
+  .comp-readme-content {
+      padding: 10px;
+  }
 </style>