fix: disable favorite toggle during sort mode and fix drag rebound issue (#12026)

* Optimize sorting-related issues, disable the "favorite stars" function during sorting, and optimize sorting behavior caused by DOM conflicts.

* fix: prevent app icon from being squished in detail drawer

Author: rowanchen-com

frontend/src/views/app-store/detail/index.vue

@@ -168,6 +168,7 @@ defineExpose({
     }
 
     .icon {
+        flex-shrink: 0;
         width: 180px;
         height: 180px;
         background-color: #ffffff;

frontend/src/views/app-store/installed/app/card.vue

@@ -15,6 +15,7 @@
                             :installed="installed"
                             :mode="mode"
                             :defaultLink="defaultLink"
+                            :sortMode="sortMode"
                             @open-backups="$emit('openBackups')"
                             @open-log="$emit('openLog')"
                             @open-terminal="$emit('openTerminal')"
@@ -51,6 +52,7 @@ interface Props {
     mode: string;
     defaultLink: string;
     currentNode: string;
+    sortMode?: boolean;
 }
 defineProps<Props>();
 

frontend/src/views/app-store/installed/app/header.vue

@@ -86,11 +86,18 @@
                             size="large"
                             icon="StarFilled"
                             type="warning"
+                            :disabled="sortMode"
                             @click="$emit('favoriteInstall')"
                         ></el-button>
                     </el-tooltip>
                     <el-tooltip effect="dark" :content="$t('website.favorite')" placement="top-start" v-else>
-                        <el-button link icon="Star" type="info" @click="$emit('favoriteInstall')"></el-button>
+                        <el-button
+                            link
+                            icon="Star"
+                            type="info"
+                            :disabled="sortMode"
+                            @click="$emit('favoriteInstall')"
+                        ></el-button>
                     </el-tooltip>
                 </span>
             </div>
@@ -151,6 +158,7 @@ import { App } from '@/api/interface/app';
 interface Props {
     installed: App.AppInstalled;
     mode: string;
+    sortMode?: boolean;
 }
 defineProps<Props>();
 

frontend/src/views/app-store/installed/index.vue

@@ -68,6 +68,7 @@
                                 :mode="mode"
                                 :defaultLink="defaultLink"
                                 :currentNode="currentNode"
+                                :sortMode="sortMode"
                                 @open-detail="openDetail(installed.appKey)"
                                 @open-backups="openBackups(installed)"
                                 @open-log="openLog(installed)"
@@ -469,6 +470,10 @@ const enterSortMode = async () => {
                 return fromFav === toFav;
             },
             onEnd: (evt: any) => {
+                const el = evt.from;
+                el.removeChild(evt.item);
+                el.insertBefore(evt.item, el.children[evt.oldIndex] || null);
+
                 const list = [...data.value];
                 const [moved] = list.splice(evt.oldIndex, 1);
                 list.splice(evt.newIndex, 0, moved);