From 519bfc9a9e39f5135a03861c77c48ee962ccf5f4 Mon Sep 17 00:00:00 2001
From: gaoyunqi <gaoyunqi@gdyd.com>
Date: Tue, 11 Jun 2024 11:54:26 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A8=E5=8D=95=E8=AE=BE=E8=AE=A1?=
 =?UTF-8?q?=E5=99=A8=E5=8A=A0=E5=85=A5=E8=AF=B4=E6=98=8E=EF=BC=8C=E6=8F=90?=
 =?UTF-8?q?=E9=86=92=E6=85=8E=E7=94=A8=E6=A0=85=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Designer/src/Designer.vue | 35 +++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/Designer/src/Designer.vue b/src/components/Designer/src/Designer.vue
index 59bfdb3..00100a4 100644
--- a/src/components/Designer/src/Designer.vue
+++ b/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>