From f05b90f86bd1d8c71325acdea8f1f34722b13285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wit=E3=80=86=E8=8B=97=E5=A4=A7?= <454690789@qq.com>
Date: Thu, 30 Mar 2023 09:53:03 +0800
Subject: [PATCH] =?UTF-8?q?fix(form-design):=20CollapseItem=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=A1=B5=E9=9D=A2css=E6=B7=BB=E5=8A=A0prefixCls?=
 =?UTF-8?q?=E5=89=8D=E7=BC=80,=20=E9=98=B2=E6=AD=A2=E6=89=93=E5=8C=85?=
 =?UTF-8?q?=E5=90=8E=E6=B1=A1=E6=9F=93=E5=85=A8=E5=B1=80=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=20(#2654)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
---
 .../VFormDesign/modules/CollapseItem.vue      | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue b/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue
index 2104554c..56f529a5 100644
--- a/src/views/form-design/components/VFormDesign/modules/CollapseItem.vue
+++ b/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,44 +66,47 @@
       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);
 
-  ul {
-    padding: 5px;
-    list-style: none;
-    display: flex;
-    margin-bottom: 0;
-    flex-wrap: wrap;
-    // background: #efefef;
+  .@{prefix-cls} {
+    ul {
+      padding: 5px;
+      list-style: none;
+      display: flex;
+      margin-bottom: 0;
+      flex-wrap: wrap;
+      // background: #efefef;
 
-    li {
-      padding: 8px 12px;
-      transition: all 0.3s;
-      width: calc(50% - 6px);
-      margin: 2.7px;
-      height: 36px;
-      line-height: 20px;
-      cursor: move;
-      border: 1px solid @border-color;
-      border-radius: 3px;
+      li {
+        padding: 8px 12px;
+        transition: all 0.3s;
+        width: calc(50% - 6px);
+        margin: 2.7px;
+        height: 36px;
+        line-height: 20px;
+        cursor: move;
+        border: 1px solid @border-color;
+        border-radius: 3px;
 
-      &:hover {
-        color: @primary-color;
-        border: 1px solid @primary-color;
-        position: relative;
-        // z-index: 1;
-        box-shadow: 0 2px 6px @primary-color;
+        &:hover {
+          color: @primary-color;
+          border: 1px solid @primary-color;
+          position: relative;
+          // z-index: 1;
+          box-shadow: 0 2px 6px @primary-color;
+        }
       }
     }
-  }
 
-  svg {
-    display: inline !important;
+    svg {
+      display: inline !important;
+    }
   }
 </style>