fix(form-design): CollapseItem组件页面css添加prefixCls前缀, 防止打包后污染全局样式 (#2654)

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>

src/views/form-design/components/VFormDesign/modules/CollapseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="prefixCls">
     <draggable
       tag="ul"
       :model-value="list"
@@ -36,6 +36,7 @@
   import draggable from 'vuedraggable';
   // import { toRefs } from '@vueuse/core';
   import { Icon } from '/@/components/Icon';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'CollapseItem',
@@ -51,6 +52,8 @@
       },
     },
     setup(props, { emit }) {
+      const { prefixCls } = useDesign('form-design-collapse-item');
+
       const state = reactive({});
       const handleStart = (e: any, list1: IVFormComponent[]) => {
         emit('start', list1[e.oldIndex].component);
@@ -63,14 +66,16 @@
       const cloneItem = (one) => {
         return props.handleListPush(one);
       };
-      return { state, handleStart, handleAdd, cloneItem };
+      return { prefixCls, state, handleStart, handleAdd, cloneItem };
     },
   });
 </script>
 
 <style lang="less" scoped>
+  @prefix-cls: ~'@{namespace}-form-design-collapse-item';
   @import url(../styles/variable.less);
 
+  .@{prefix-cls} {
     ul {
       padding: 5px;
       list-style: none;
@@ -103,4 +108,5 @@
     svg {
       display: inline !important;
     }
+  }
 </style>