From 2d82702efee9baeb6a4216e0df4932a4e1d34cbf Mon Sep 17 00:00:00 2001
From: unknown <fanchenio@163.com>
Date: Sun, 16 Jun 2024 20:18:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=88=86=E7=B1=BB=E5=9C=A8?=
 =?UTF-8?q?=E9=A1=B6=E9=83=A8=EF=BC=8C=E5=BD=93=E5=AD=90=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F=E8=BF=87=E5=A4=9A=E8=B6=85=E5=87=BA=E5=B1=8F?=
 =?UTF-8?q?=E5=B9=95=E8=8C=83=E5=9B=B4=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../classification/components/Content.vue     | 173 ++++++++++--------
 src/pages/item/components/Content.vue         |   6 +
 2 files changed, 101 insertions(+), 78 deletions(-)

diff --git a/src/pages/classification/components/Content.vue b/src/pages/classification/components/Content.vue
index a6ec13c..399c700 100644
--- a/src/pages/classification/components/Content.vue
+++ b/src/pages/classification/components/Content.vue
@@ -130,20 +130,20 @@
             <KeyboardArrowDownRound></KeyboardArrowDownRound>
           </Icon>
         </div>
-        <ul
+        <div
           v-show="
             classification.childList &&
             classification.childList.length > 0 &&
             classificationChildShowHiddenMap.has(classification.id)
           "
-          class="classification-child-list"
           :class="[
             `${
               store.setting.classification.layout === 'top'
-                ? 'fixed z-[10000] rounded drop-shadow-[0_0_6px_rgba(0,0,0,0.2)] origin-top-left pt-1 mt-1'
+                ? '!fixed !z-[10000] !rounded-lg !drop-shadow-[0_0_6px_rgba(0,0,0,0.2)] !origin-top-left !pt-1 !mt-1'
                 : ''
             }`,
           ]"
+          :data-simplebar="store.setting.classification.layout === 'top'"
           :style="{
             backgroundColor:
               store.setting.classification.layout === 'top'
@@ -156,87 +156,95 @@
               store.setting.classification.layout === 'top'
                 ? classificationWidth + 'px'
                 : '',
+            maxHeight:
+              store.setting.classification.layout === 'top' ? '300px' : 'auto',
           }"
-          :classification-parent-id="classification.id"
         >
-          <li
-            v-for="(
-              childClassification, childIndex
-            ) of classification.childList"
-            :id="'classification-child-' + classification.id"
-            :key="
-              'classification-' +
-              classification.id +
-              '-' +
-              childClassification.id +
-              '-' +
-              childIndex
-            "
-            class="classification-child mb-1 px-2 flex items-center h-[30px]"
-            :class="[
-              `${
-                store.setting.classification.nameAlign === 'center' ||
-                store.setting.classification.mode === 'icon'
-                  ? 'justify-center'
-                  : ''
-              }`,
-              `${
-                store.setting.classification.layout !== 'top' ? 'rounded' : ''
-              }`,
-              `${store.setting.classification.mode === 'normal' ? 'px-2' : ''}`,
-            ]"
-            :style="{
-              color:
-                isSelectedChild(childClassification.id, classification.id) ||
-                (store.itemSorting &&
-                  store.mouseoverClassificationId === childClassification.id)
-                  ? store.setting.appearance.theme.secondFontColor
-                  : undefined,
-              backgroundColor:
-                isSelectedChild(childClassification.id, classification.id) ||
-                (store.itemSorting &&
-                  store.mouseoverClassificationId === childClassification.id)
-                  ? hexToRGBA(
-                      store.setting.appearance.theme.secondBackgroundColor,
-                      store.setting.appearance.transparency
-                    )
-                  : undefined,
-            }"
+          <ul
+            class="classification-child-list h-full"
             :classification-parent-id="classification.id"
-            :classification-id="childClassification.id"
-            @click="
-              switchChildClassification(
-                classification.id,
-                childClassification.id
-              )
-            "
-            @dragleave="clearMouseOverChangeClassificationSetTimeout"
           >
-            <span
-              class="overflow-hidden text-ellipsis whitespace-nowrap"
+            <li
+              v-for="(
+                childClassification, childIndex
+              ) of classification.childList"
+              :id="'classification-child-' + classification.id"
+              :key="
+                'classification-' +
+                classification.id +
+                '-' +
+                childClassification.id +
+                '-' +
+                childIndex
+              "
+              class="classification-child mb-1 px-2 flex items-center h-[30px]"
+              :class="[
+                `${
+                  store.setting.classification.nameAlign === 'center' ||
+                  store.setting.classification.mode === 'icon'
+                    ? 'justify-center'
+                    : ''
+                }`,
+                `${
+                  store.setting.classification.layout !== 'top' ? 'rounded' : ''
+                }`,
+                `${
+                  store.setting.classification.mode === 'normal' ? 'px-2' : ''
+                }`,
+              ]"
               :style="{
-                filter: store.setting.appearance.fontShadow
-                  ? 'drop-shadow(1px 1px 1px ' +
-                    store.setting.appearance.fontShadowColor +
-                    ')'
-                  : undefined,
+                color:
+                  isSelectedChild(childClassification.id, classification.id) ||
+                  (store.itemSorting &&
+                    store.mouseoverClassificationId === childClassification.id)
+                    ? store.setting.appearance.theme.secondFontColor
+                    : undefined,
+                backgroundColor:
+                  isSelectedChild(childClassification.id, classification.id) ||
+                  (store.itemSorting &&
+                    store.mouseoverClassificationId === childClassification.id)
+                    ? hexToRGBA(
+                        store.setting.appearance.theme.secondBackgroundColor,
+                        store.setting.appearance.transparency
+                      )
+                    : undefined,
               }"
+              :classification-parent-id="classification.id"
+              :classification-id="childClassification.id"
+              @click="
+                switchChildClassification(
+                  classification.id,
+                  childClassification.id
+                )
+              "
+              @dragleave="clearMouseOverChangeClassificationSetTimeout"
             >
-              {{ getClassificationName(childClassification) }}
-            </span>
-          </li>
-          <li
-            v-show="store.setting.classification.layout !== 'top'"
-            class="h-[1px] my-1 border-t-[1px]"
-            style="border-top-style: solid"
-            :style="{
-              borderColor: hexToRGBA(
-                store.setting.appearance.theme.borderColor,
-                store.setting.appearance.transparency
-              ),
-            }"
-          ></li>
-        </ul>
+              <span
+                class="overflow-hidden text-ellipsis whitespace-nowrap"
+                :style="{
+                  filter: store.setting.appearance.fontShadow
+                    ? 'drop-shadow(1px 1px 1px ' +
+                      store.setting.appearance.fontShadowColor +
+                      ')'
+                    : undefined,
+                }"
+              >
+                {{ getClassificationName(childClassification) }}
+              </span>
+            </li>
+            <li
+              v-show="store.setting.classification.layout !== 'top'"
+              class="h-[1px] my-1 border-t-[1px]"
+              style="border-top-style: solid"
+              :style="{
+                borderColor: hexToRGBA(
+                  store.setting.appearance.theme.borderColor,
+                  store.setting.appearance.transparency
+                ),
+              }"
+            ></li>
+          </ul>
+        </div>
       </li>
     </ul>
   </div>
@@ -299,10 +307,17 @@ watch(
   () => {
     // +1
     count.value = count.value + 1;
+    classificationChildShowHiddenMap.value = new Map();
     // 刷新DOM完毕执行
     nextTick(() => {
+      // 滚动条
+      createSimpleBar();
       // 设置分类宽度
       setClassificationWidth();
+      // 创建父级分类拖拽对象;
+      createClassificationParentSortable();
+      // 创建子级分类拖拽对象
+      createClassificationChildSortable();
     });
   }
 );
@@ -787,6 +802,8 @@ function createClassificationParentSortable() {
             setClassificationWidth();
             // 页面高度 - 34（标题栏固定高度）
             height.value = document.documentElement.clientHeight - 34;
+            // 创建子级分类拖拽对象
+            createClassificationChildSortable();
           });
         }
       },
@@ -815,7 +832,7 @@ function createClassificationChildSortable() {
     classificationChildSortable.push(
       Sortable.create(<HTMLElement>element, {
         animation: 0,
-        forceFallback: true,
+        forceFallback: false,
         fallbackTolerance: 4,
         disabled: lockClassification,
         onStart() {
diff --git a/src/pages/item/components/Content.vue b/src/pages/item/components/Content.vue
index c851ab4..8c37d21 100644
--- a/src/pages/item/components/Content.vue
+++ b/src/pages/item/components/Content.vue
@@ -154,6 +154,12 @@ watch(
     nextTick(() => {
       // 监听页面大小
       resize();
+      // 设置项目宽度
+      setItemWidth();
+      // 创建项目拖拽对象
+      createItemSortable();
+      // 清除批量操作
+      clearBatchOperation();
       // 滚动到顶部
       scrollToTop(itemContentSimpleBar);
     });