修改

apps/web-test/src/views/dashboard/home/index.vue

@@ -61,6 +61,7 @@ const setComponentRef = (el, id) => {
 
 const { proxy, ctx: that } = getCurrentInstance();
 const layout = ref([]);
+
 onMounted(() => {
   const layoutStr = JSON.parse(localStorage.getItem('layout'));
   if (layoutStr && layoutStr.length > 0) {
@@ -72,6 +73,11 @@ onMounted(() => {
     layout.value = layoutStr;
   }
   console.log('oooo', layout.value);
+
+  // 计算分组数量：  {workbench:12}
+  for (const item of groupList) {
+    item.count = tilesList.filter((item1) => item1.group == item.value).length;
+  }
 });
 const colNum = 12;
 let defaultH = 2;
@@ -548,7 +554,7 @@ const haveItem = (name) => {
 };
 
 // 磁贴商店筛选
-const shopFlotter = ref('1');
+const shopFlotter = ref('-1');
 
 // 新建磁贴弹层
 const addTilesModal = ref(false);
@@ -598,7 +604,11 @@ const formState = reactive({
           :h="item.h"
           :i="item.i"
           :is-resizable="
-            tilesIsMove && item && item.isResize ? item.isResize : false
+            tilesIsMove &&
+            (item.component.includes('Output2') ||
+              item.component.includes('Output5'))
+              ? true
+              : false
           "
           :min-h="item.minH"
           :min-w="item.minW"
@@ -663,7 +673,7 @@ const formState = reactive({
         <Popover v-model:open="shop" placement="topRight" trigger="click">
           <template #title>
             <div class="flex items-center justify-between">
-              <div class="text-lg">磁贴商店（127）</div>
+              <div class="text-lg">磁贴商店（{{ tilesList.length }}）</div>
               <CloseOutlined class="cursor-pointer" @click="shop = false" />
             </div>
           </template>
@@ -684,38 +694,40 @@ const formState = reactive({
             <div class="shop-box">
               <!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
               <Collapse v-model:active-key="activeKeyArr" style="width: 100%">
-                <CollapsePanel
+                <template v-for="(value, num) in groupList" :key="num">
-                  v-for="(value, num) in groupList"
+                  <CollapsePanel
-                  :key="num"
+                    v-if="value.show"
-                  :header="value.label"
+                    :key="num"
-                >
+                    :header="`${value.label}(${value.count})`"
-                  <div class="components-box">
+                  >
-                    <template v-for="item in tilesList" :key="item.name">
+                    <div class="components-box">
-                      <div
+                      <template v-for="item in tilesList" :key="item.name">
-                        v-if="item.group == value.value"
+                        <div
-                        :class="{
+                          v-if="item.group == value.value"
-                          'active pointer-events-none !cursor-no-drop':
+                          :class="{
-                            haveItem(item.name),
+                            'active pointer-events-none !cursor-no-drop':
-                        }"
+                              haveItem(item.name),
-                        :draggable="haveItem(item.name)"
+                          }"
-                        class="ctrl-box bg-background relative"
+                          :draggable="haveItem(item.name)"
-                        @drag="drag"
+                          class="ctrl-box bg-background relative"
-                        @dragend="dragend($event)"
+                          @drag="drag"
-                        @dragstart="dragstart($event, item)"
+                          @dragend="dragend($event)"
-                      >
+                          @dragstart="dragstart($event, item)"
-                        <div class="ctrl-name">
+                        >
-                          {{ `${item.name}(${item.size})` }}
+                          <div class="ctrl-name">
+                            {{ `${item.name}(${item.size})` }}
+                          </div>
+                          <img :src="`/xbyt/${item.name2}`" alt="" />
+                          <Checkbox
+                            :checked="haveItem(item.name)"
+                            :value="item.name"
+                            class="absolute bottom-0 right-1"
+                          />
                         </div>
-                        <img :src="`/xbyt/${item.name2}`" alt="" />
+                      </template>
-                        <Checkbox
+                    </div>
-                          :checked="haveItem(item.name)"
+                  </CollapsePanel>
-                          :value="item.name"
+                </template>
-                          class="absolute bottom-0 right-1"
-                        />
-                      </div>
-                    </template>
-                  </div>
-                </CollapsePanel>
               </Collapse>
               <!-- </CheckboxGroup> -->
             </div>