fix(account): polish sidebar favorites and sync feedback

src/App.vue

@@ -69,6 +69,8 @@
           :sync-enabled="installedSyncEnabled ?? false"
           :loading="downloadedLoading"
           :error="downloadedError"
+          :syncing="syncLoading"
+          :sync-message="syncStatusMessage"
           @open-forum="openExternalUrl(FLARUM_BASE_URL)"
           @edit-profile="openExternalUrl(FLARUM_SETTINGS_URL)"
           @toggle-sync="setInstalledSyncEnabled"
@@ -86,6 +88,7 @@
           @create-folder="createFavoriteFolderFromPrompt"
           @remove-selected="removeSelectedFavorites"
           @install-selected="installResolvedFavorites"
+          @open-detail="openDetail"
         />
         <template v-else-if="activeTab === 'home'">
           <HomeView
@@ -187,6 +190,7 @@
       :error="restoreError"
       :items="restoreItems"
       :installed-keys="installedCloudKeys"
+      :installed-package-keys="installedCloudPackageKeys"
       @close="showRestoreModal = false"
       @install-selected="installCloudItems"
     />
@@ -244,6 +248,7 @@
       :folders="favoriteFolders"
       @close="showFavoriteSelector = false"
       @select-folder="addCurrentFavoriteToFolder"
+      @create-folder="createFavoriteFolderFromSelector"
     />
   </div>
 </template>
@@ -338,6 +343,7 @@ import { resolveFavoriteItems } from "./modules/favoriteAvailability";
 import {
   buildSyncItems,
   cloudItemKey,
+  cloudPackageKey,
   mergeInstalledApps,
 } from "./modules/appListSync";
 import type {
@@ -444,6 +450,7 @@ const downloadedLoading = ref(false);
 const downloadedError = ref("");
 const downloadedRequestGeneration = ref(0);
 const syncLoading = ref(false);
+const syncStatusMessage = ref("");
 const syncRequestGeneration = ref(0);
 const syncCandidateApps = ref<App[]>([]);
 const restoreLoading = ref(false);
@@ -576,6 +583,10 @@ const installedCloudKeys = computed(
   () => new Set(installedApps.value.map((app) => cloudItemKey(app))),
 );
 
+const installedCloudPackageKeys = computed(
+  () => new Set(syncCandidateApps.value.map((app) => cloudPackageKey(app))),
+);
+
 // 方法
 const syncThemePreference = () => {
   document.documentElement.classList.toggle("dark", isDarkTheme.value);
@@ -1459,6 +1470,13 @@ const clearRestoreState = () => {
   showRestoreModal.value = false;
 };
 
+const clearInstalledSyncState = () => {
+  syncRequestGeneration.value += 1;
+  syncLoading.value = false;
+  syncStatusMessage.value = "";
+  syncCandidateApps.value = [];
+};
+
 const nextFavoriteRequestGeneration = (): number => {
   favoriteRequestGeneration.value += 1;
   return favoriteRequestGeneration.value;
@@ -1489,9 +1507,7 @@ const handleLogout = () => {
   clearFavoriteState();
   clearDownloadedState();
   clearRestoreState();
-  syncRequestGeneration.value += 1;
-  syncLoading.value = false;
-  syncCandidateApps.value = [];
+  clearInstalledSyncState();
   loadInstalledSyncPreference(null);
   showLoginModal.value = false;
   showLoginPrompt.value = false;
@@ -1514,6 +1530,7 @@ const handleFlarumLogin = async (payload: FlarumLoginPayload) => {
       flarumToken: flarumToken.token,
     });
     setAuthSession(session);
+    clearInstalledSyncState();
     loadInstalledSyncPreference(session.user.id);
     showLoginModal.value = false;
   } catch (error: unknown) {
@@ -1599,6 +1616,7 @@ const syncInstalledAppsToAccount = async (): Promise<void> => {
   const generation = syncRequestGeneration.value + 1;
   syncRequestGeneration.value = generation;
   syncLoading.value = true;
+  syncStatusMessage.value = "";
   try {
     const refreshed = await refreshInstalledSyncCandidates(
       () =>
@@ -1619,6 +1637,7 @@ const syncInstalledAppsToAccount = async (): Promise<void> => {
       return;
     }
     downloadedError.value = "";
+    syncStatusMessage.value = "同步完成";
   } catch (error: unknown) {
     if (
       syncRequestGeneration.value !== generation ||
@@ -1627,6 +1646,7 @@ const syncInstalledAppsToAccount = async (): Promise<void> => {
       return;
     }
     downloadedError.value = (error as Error)?.message || "同步已安装应用失败";
+    syncStatusMessage.value = downloadedError.value;
   } finally {
     if (
       syncRequestGeneration.value === generation &&
@@ -1801,6 +1821,13 @@ const addCurrentFavoriteToFolder = async (folderId: number | "default") => {
   }
 };
 
+const createFavoriteFolderFromSelector = async () => {
+  await createFavoriteFolderFromPrompt();
+  const app = favoriteTargetApp.value;
+  if (!app) return;
+  showFavoriteSelector.value = true;
+};
+
 const openFavoriteManagement = async () => {
   if (!requireLogin("请登录后查看我的收藏。")) return;
   currentView.value = "favorites";

src/__tests__/unit/App.account-placeholders.test.ts

@@ -678,12 +678,64 @@ describe("App account placeholders", () => {
     await fireEvent.click(
       await screen.findByRole("button", { name: "立即同步" }),
     );
-    await fireEvent.click(screen.getByRole("button", { name: "立即同步" }));
+    expect(screen.getByRole("button", { name: "同步中..." })).toBeDisabled();
 
     await waitFor(() => {
       expect(uploadSyncedAppList).toHaveBeenCalledTimes(1);
     });
     syncUpload.resolve(syncedList([]));
+    expect(await screen.findByText("同步完成")).toBeTruthy();
+  });
+
+  it("clears manual sync feedback before another user opens account management", async () => {
+    const syncUpload = createDeferred<SyncedAppList>();
+    vi.mocked(uploadSyncedAppList).mockReturnValue(syncUpload.promise);
+    invoke.mockImplementation(async (channel: string) => {
+      if (channel === "get-store-filter") return "apm";
+      if (channel === "check-spark-available") return false;
+      if (channel === "check-apm-available") return true;
+      if (channel === "get-app-version") return "5.0.0";
+      if (channel === "get-system-info") return { distro: "deepin 25" };
+      if (channel === "list-installed") return { success: true, apps: [] };
+      return [];
+    });
+    render(App);
+
+    await fireEvent.click(await screen.findByRole("button", { name: /Momen/ }));
+    await fireEvent.click(screen.getByText("用户管理"));
+    await fireEvent.click(
+      await screen.findByRole("button", { name: "立即同步" }),
+    );
+
+    await waitFor(() => {
+      expect(uploadSyncedAppList).toHaveBeenCalledTimes(1);
+    });
+    syncUpload.resolve(syncedList([]));
+    expect(await screen.findByText("同步完成")).toBeTruthy();
+
+    await fireEvent.click(
+      await screen.findByRole("button", { name: /^Momen$/ }),
+    );
+    if (!screen.queryByText("退出登录")) {
+      await fireEvent.click(
+        await screen.findByRole("button", { name: /^Momen$/ }),
+      );
+    }
+    await fireEvent.click(screen.getByText("退出登录"));
+    await waitFor(() => {
+      expect(screen.getByRole("button", { name: "登录 / 注册" })).toBeTruthy();
+    });
+
+    setSecondUserSession();
+    const secondUserButton = await screen.findByRole("button", {
+      name: /^Second User$/,
+    });
+    if (!screen.queryByText("用户管理")) {
+      await fireEvent.click(secondUserButton);
+    }
+    await fireEvent.click(await screen.findByText("用户管理"));
+
+    expect(screen.queryByText("同步完成")).toBeNull();
   });
 
   it("does not upload stale sync candidates after logout", async () => {

src/__tests__/unit/AppListRestoreModal.test.ts

@@ -55,6 +55,22 @@ describe("AppListRestoreModal", () => {
     expect(screen.getByText("已安装")).toBeTruthy();
   });
 
+  it("treats the same package installed from another source as installed", () => {
+    render(AppListRestoreModal, {
+      props: {
+        show: true,
+        loading: false,
+        error: "",
+        items: [createItem({ origin: "spark" })],
+        installedKeys: new Set(["apm:spark-notes"]),
+        installedPackageKeys: new Set(["spark-notes"]),
+      },
+    });
+
+    expect(screen.getByLabelText("Spark Notes")).toBeDisabled();
+    expect(screen.getByText("已安装")).toBeTruthy();
+  });
+
   it("removes selected items when they become installed", async () => {
     const rendered = render(AppListRestoreModal, {
       props: {
@@ -72,4 +88,26 @@ describe("AppListRestoreModal", () => {
     expect(screen.getByLabelText("Spark Notes")).toBeDisabled();
     expect(screen.getByRole("button", { name: "加入安装队列" })).toBeDisabled();
   });
+
+  it("removes selected items when the same package becomes installed from another source", async () => {
+    const rendered = render(AppListRestoreModal, {
+      props: {
+        show: true,
+        loading: false,
+        error: "",
+        items: [createItem({ origin: "spark" })],
+        installedKeys: new Set<string>(),
+        installedPackageKeys: new Set<string>(),
+      },
+    });
+
+    await fireEvent.click(screen.getByLabelText("Spark Notes"));
+    await rendered.rerender({
+      installedPackageKeys: new Set(["spark-notes"]),
+    });
+
+    expect(screen.getByLabelText("Spark Notes")).toBeDisabled();
+    expect(screen.getByLabelText("Spark Notes")).not.toBeChecked();
+    expect(screen.getByRole("button", { name: "加入安装队列" })).toBeDisabled();
+  });
 });

src/__tests__/unit/AppSidebar.account.test.ts

@@ -45,4 +45,39 @@ describe("AppSidebar account entry", () => {
     expect(screen.getByText("我的收藏")).toBeTruthy();
     expect(screen.getByText("退出登录")).toBeTruthy();
   });
+
+  it("keeps long account names inside the sidebar account entry", () => {
+    const longUser: SparkUser = {
+      ...user,
+      displayName: "SuperEndermanSMSuperEndermanSMSuperEndermanSM",
+    };
+
+    const { container } = render(AppSidebar, {
+      props: { ...baseProps, currentUser: longUser },
+    });
+
+    const accountButton = screen.getByRole("button", {
+      name: /SuperEndermanSM/,
+    });
+    const textWrapper = accountButton.querySelector(
+      "[data-testid='account-text']",
+    );
+    const accountName = screen.getByText(longUser.displayName);
+
+    expect(textWrapper?.className).toContain("min-w-0");
+    expect(accountName.className).toContain("truncate");
+    expect(container.textContent).toContain(longUser.displayName);
+  });
+
+  it("closes the quick menu after selecting an account action", async () => {
+    const rendered = render(AppSidebar, {
+      props: { ...baseProps, currentUser: user },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: /Momen/ }));
+    await fireEvent.click(screen.getByRole("button", { name: "用户管理" }));
+
+    expect(rendered.emitted("open-user-management")).toHaveLength(1);
+    expect(screen.queryByRole("button", { name: "用户管理" })).toBeNull();
+  });
 });

src/__tests__/unit/CategoryBar.test.ts

@@ -0,0 +1,19 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+const categoryBarSource = readFileSync(
+  resolve(
+    dirname(fileURLToPath(import.meta.url)),
+    "../../components/CategoryBar.vue",
+  ),
+  "utf-8",
+);
+
+describe("CategoryBar", () => {
+  it("uses the requested blue for the selected category pill", () => {
+    expect(categoryBarSource.toLowerCase()).toContain("background: #2b7fff;");
+  });
+});

src/__tests__/unit/FavoriteFolderManager.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 
 import FavoriteFolderManager from "@/components/FavoriteFolderManager.vue";
 import type {
+  App,
   FavoriteFolder,
   ResolvedFavoriteItem,
 } from "@/global/typedefinition";
@@ -30,6 +31,26 @@ const item: ResolvedFavoriteItem = {
   selectedApp: null,
 };
 
+const selectedApp: App = {
+  name: "WPS",
+  pkgname: "wps",
+  version: "1.0.0",
+  filename: "wps_1.0.0_amd64.deb",
+  torrent_address: "",
+  author: "",
+  contributor: "",
+  website: "",
+  update: "",
+  size: "110M",
+  more: "Office suite",
+  tags: "office",
+  img_urls: [],
+  icons: "",
+  category: "office",
+  origin: "apm",
+  currentStatus: "not-installed",
+};
+
 describe("FavoriteFolderManager", () => {
   it("shows downlisted favorites and emits bulk delete", async () => {
     const rendered = render(FavoriteFolderManager, {
@@ -48,4 +69,23 @@ describe("FavoriteFolderManager", () => {
 
     expect(rendered.emitted("remove-selected")?.[0]?.[0]).toEqual([2]);
   });
+
+  it("opens a favorite item's app detail from the row content", async () => {
+    const rendered = render(FavoriteFolderManager, {
+      props: {
+        folders: [folder],
+        activeFolderId: 1,
+        items: [{ ...item, status: "installable", selectedApp }],
+        loading: false,
+        error: "",
+      },
+    });
+
+    await fireEvent.click(
+      screen.getByRole("button", { name: "打开 WPS 详情" }),
+    );
+
+    expect(rendered.emitted("open-detail")?.[0]?.[0]).toEqual(selectedApp);
+    expect(rendered.emitted("remove-selected")).toBeUndefined();
+  });
 });

src/__tests__/unit/FavoriteFolderSelector.test.ts

@@ -1,7 +1,16 @@
-import { render } from "@testing-library/vue";
+import { fireEvent, render, screen } from "@testing-library/vue";
 import { describe, expect, it } from "vitest";
 
 import FavoriteFolderSelector from "@/components/FavoriteFolderSelector.vue";
+import type { FavoriteFolder } from "@/global/typedefinition";
+
+const defaultFolder: FavoriteFolder = {
+  id: 1,
+  name: "默认收藏夹",
+  itemCount: 1,
+  createdAt: "2026-05-18T00:00:00Z",
+  updatedAt: "2026-05-18T00:00:00Z",
+};
 
 describe("FavoriteFolderSelector", () => {
   it("renders above the app detail modal and its child popups", () => {
@@ -16,4 +25,30 @@ describe("FavoriteFolderSelector", () => {
 
     expect(overlay?.className).toContain("z-[90]");
   });
+
+  it("does not duplicate the default folder returned by the backend", () => {
+    render(FavoriteFolderSelector, {
+      props: {
+        show: true,
+        folders: [defaultFolder],
+      },
+    });
+
+    expect(screen.getAllByRole("button", { name: "默认收藏夹" })).toHaveLength(
+      1,
+    );
+  });
+
+  it("offers creating a folder while selecting favorites", async () => {
+    const rendered = render(FavoriteFolderSelector, {
+      props: {
+        show: true,
+        folders: [defaultFolder],
+      },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: "新建收藏夹" }));
+
+    expect(rendered.emitted("create-folder")).toHaveLength(1);
+  });
 });

src/__tests__/unit/LoginModal.test.ts

@@ -4,6 +4,14 @@ import { describe, expect, it } from "vitest";
 import LoginModal from "@/components/LoginModal.vue";
 
 describe("LoginModal", () => {
+  it("does not show the old password forwarding note", () => {
+    render(LoginModal, {
+      props: { show: true, loading: false, error: "" },
+    });
+
+    expect(screen.queryByText(/密码仅直接/)).toBeNull();
+  });
+
   it("emits login credentials and register request", async () => {
     const rendered = render(LoginModal, {
       props: { show: true, loading: false, error: "" },

src/__tests__/unit/UserManagementView.test.ts

@@ -35,6 +35,8 @@ describe("UserManagementView", () => {
         syncEnabled: true,
         loading: false,
         error: "",
+        syncing: false,
+        syncMessage: "",
       },
     });
 
@@ -45,4 +47,24 @@ describe("UserManagementView", () => {
     expect(screen.getByText("WPS")).toBeTruthy();
     expect(screen.getByLabelText("自动同步已安装应用")).toBeChecked();
   });
+
+  it("shows manual sync progress and result feedback", async () => {
+    const { rerender } = render(UserManagementView, {
+      props: {
+        user,
+        downloadedApps: [],
+        syncEnabled: false,
+        loading: false,
+        error: "",
+        syncing: true,
+        syncMessage: "",
+      },
+    });
+
+    expect(screen.getByRole("button", { name: "同步中..." })).toBeDisabled();
+
+    await rerender({ syncing: false, syncMessage: "同步完成" });
+
+    expect(screen.getByText("同步完成")).toBeTruthy();
+  });
 });

src/__tests__/unit/appListSync.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from "vitest";
 import {
   buildSyncItems,
   cloudItemKey,
+  cloudPackageKey,
   mergeInstalledApps,
 } from "@/modules/appListSync";
 import type { App } from "@/global/typedefinition";
@@ -76,6 +77,10 @@ describe("appListSync", () => {
     );
   });
 
+  it("builds origin-agnostic package keys for cross-source restore detection", () => {
+    expect(cloudPackageKey({ pkgname: "amber-ce" })).toBe("amber-ce");
+  });
+
   it("merges refreshed apps without mutating active modal origin lists", () => {
     const current = [createApp({ origin: "apm", pkgname: "apm-installed" })];
     const refreshed = [

src/components/AppListRestoreModal.vue

@@ -129,7 +129,7 @@
 import { computed, ref, watch } from "vue";
 
 import type { SyncedAppListItem } from "@/global/typedefinition";
-import { cloudItemKey } from "@/modules/appListSync";
+import { cloudItemKey, cloudPackageKey } from "@/modules/appListSync";
 
 const props = defineProps<{
   show: boolean;
@@ -137,6 +137,7 @@ const props = defineProps<{
   error: string;
   items: SyncedAppListItem[];
   installedKeys: Set<string>;
+  installedPackageKeys?: Set<string>;
 }>();
 
 const emit = defineEmits<{
@@ -147,7 +148,8 @@ const emit = defineEmits<{
 const selectedKeys = ref<Set<string>>(new Set());
 
 const isInstalled = (item: SyncedAppListItem): boolean =>
-  props.installedKeys.has(cloudItemKey(item));
+  props.installedKeys.has(cloudItemKey(item)) ||
+  Boolean(props.installedPackageKeys?.has(cloudPackageKey(item)));
 
 const selectedItems = computed(() =>
   props.items.filter(
@@ -157,7 +159,12 @@ const selectedItems = computed(() =>
 
 const pruneSelectedKeys = (): void => {
   selectedKeys.value = new Set(
-    [...selectedKeys.value].filter((key) => !props.installedKeys.has(key)),
+    [...selectedKeys.value].filter((key) => {
+      const item = props.items.find(
+        (candidate) => cloudItemKey(candidate) === key,
+      );
+      return item ? !isInstalled(item) : !props.installedKeys.has(key);
+    }),
   );
 };
 
@@ -179,7 +186,7 @@ watch(
 );
 
 watch(
-  () => props.installedKeys,
+  () => [props.installedKeys, props.installedPackageKeys] as const,
   () => {
     pruneSelectedKeys();
   },

src/components/AppSidebar.vue

@@ -20,24 +20,24 @@
             :alt="accountLabel"
             class="h-11 w-11 rounded-2xl object-cover shadow-sm ring-1 ring-slate-900/5"
           />
-          <div class="flex flex-col">
+          <div data-testid="account-text" class="flex min-w-0 flex-col">
             <span
-              class="text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
+              class="truncate text-xs uppercase tracking-[0.3em] text-slate-500 dark:text-slate-400"
               >{{ currentUser ? currentUser.forumLevel : "Spark Store" }}</span
             >
             <span
-              class="text-lg font-semibold text-slate-900 dark:text-white"
+              class="truncate text-lg font-semibold text-slate-900 dark:text-white"
               >{{ accountLabel }}</span
             >
           </div>
         </button>
         <AccountQuickMenu
           v-if="currentUser && showAccountMenu"
-          @open-user-management="emit('open-user-management')"
-          @open-favorites="emit('open-favorites')"
-          @open-forum="emit('open-forum')"
-          @edit-profile="emit('edit-profile')"
-          @logout="emit('logout')"
+          @open-user-management="emitAccountAction('open-user-management')"
+          @open-favorites="emitAccountAction('open-favorites')"
+          @open-forum="emitAccountAction('open-forum')"
+          @edit-profile="emitAccountAction('edit-profile')"
+          @logout="emitAccountAction('logout')"
         />
       </div>
       <div class="flex items-center gap-1">
@@ -177,6 +177,22 @@ const handleAccountClick = () => {
   showAccountMenu.value = !showAccountMenu.value;
 };
 
+const emitAccountAction = (
+  action:
+    | "open-user-management"
+    | "open-favorites"
+    | "open-forum"
+    | "edit-profile"
+    | "logout",
+) => {
+  showAccountMenu.value = false;
+  if (action === "open-user-management") emit("open-user-management");
+  else if (action === "open-favorites") emit("open-favorites");
+  else if (action === "open-forum") emit("open-forum");
+  else if (action === "edit-profile") emit("edit-profile");
+  else emit("logout");
+};
+
 const toggleTheme = () => {
   emit("toggle-theme");
 };

src/components/CategoryBar.vue

@@ -8,7 +8,9 @@
         @click="selectCategory('all')"
       >
         <span>全部</span>
-        <span v-if="totalCount > 0" class="category-pill-count">{{ totalCount }}</span>
+        <span v-if="totalCount > 0" class="category-pill-count">{{
+          totalCount
+        }}</span>
       </button>
       <button
         v-for="(category, key) in categories"
@@ -19,7 +21,9 @@
         @click="selectCategory(key)"
       >
         <span>{{ category.zh }}</span>
-        <span v-if="categoryCounts[key]" class="category-pill-count">{{ categoryCounts[key] }}</span>
+        <span v-if="categoryCounts[key]" class="category-pill-count">{{
+          categoryCounts[key]
+        }}</span>
       </button>
     </div>
   </div>
@@ -101,22 +105,22 @@ const selectCategory = (category: string) => {
 }
 
 .category-pill-active {
-  background: #0071e3;
+  background: #2b7fff;
   color: #fff;
 }
 
 .category-pill-active:hover {
-  background: #0066cc;
+  background: #2b7fff;
   color: #fff;
 }
 
 .dark .category-pill-active {
-  background: #409cff;
+  background: #2b7fff;
   color: #fff;
 }
 
 .dark .category-pill-active:hover {
-  background: #0071e3;
+  background: #2b7fff;
   color: #fff;
 }
 

src/components/FavoriteFolderManager.vue

@@ -48,7 +48,7 @@
       >
         当前收藏夹暂无应用。
       </div>
-      <label
+      <div
         v-for="resolved in items"
         :key="resolved.item.id"
         class="flex items-center gap-3 rounded-2xl border border-slate-200 p-4 transition hover:bg-slate-50 dark:border-slate-800 dark:hover:bg-slate-800/60"
@@ -60,33 +60,45 @@
           :value="resolved.item.id"
           :aria-label="`选择 ${resolved.item.name || resolved.item.pkgname}`"
         />
-        <img
-          v-if="resolved.item.iconUrl"
-          :src="resolved.item.iconUrl"
-          alt=""
-          class="h-10 w-10 rounded-xl object-cover"
-        />
-        <div
-          v-else
-          class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-sm font-semibold text-slate-500 dark:bg-slate-800"
+        <button
+          type="button"
+          class="flex min-w-0 flex-1 items-center gap-3 text-left"
+          :aria-label="`打开 ${resolved.item.name || resolved.item.pkgname} 详情`"
+          :disabled="!resolved.selectedApp"
+          @click="openFavoriteDetail(resolved)"
         >
-          {{ (resolved.item.name || resolved.item.pkgname).slice(0, 1) }}
-        </div>
-        <div class="min-w-0 flex-1">
-          <p class="truncate font-medium text-slate-900 dark:text-white">
-            {{ resolved.item.name || resolved.item.pkgname }}
-          </p>
-          <p class="truncate text-xs text-slate-500 dark:text-slate-400">
-            {{ resolved.item.pkgname }} · {{ resolved.item.category }}
-          </p>
-        </div>
+          <img
+            v-if="resolved.item.iconUrl"
+            :src="resolved.item.iconUrl"
+            alt=""
+            class="h-10 w-10 rounded-xl object-cover"
+          />
+          <span
+            v-else
+            class="flex h-10 w-10 items-center justify-center rounded-xl bg-slate-100 text-sm font-semibold text-slate-500 dark:bg-slate-800"
+          >
+            {{ (resolved.item.name || resolved.item.pkgname).slice(0, 1) }}
+          </span>
+          <span class="min-w-0 flex-1">
+            <span
+              class="block truncate font-medium text-slate-900 dark:text-white"
+            >
+              {{ resolved.item.name || resolved.item.pkgname }}
+            </span>
+            <span
+              class="block truncate text-xs text-slate-500 dark:text-slate-400"
+            >
+              {{ resolved.item.pkgname }} · {{ resolved.item.category }}
+            </span>
+          </span>
+        </button>
         <span
           class="rounded-full px-3 py-1 text-xs font-medium"
           :class="statusClass(resolved.status)"
         >
           {{ resolved.reason }}
         </span>
-      </label>
+      </div>
     </div>
 
     <div class="mt-6 flex flex-wrap gap-3">
@@ -121,6 +133,7 @@
 import { computed, ref, watch } from "vue";
 import type {
   FavoriteAvailabilityStatus,
+  App,
   FavoriteFolder,
   ResolvedFavoriteItem,
 } from "@/global/typedefinition";
@@ -138,6 +151,7 @@ const emit = defineEmits<{
   "create-folder": [];
   "remove-selected": [itemIds: number[]];
   "install-selected": [items: ResolvedFavoriteItem[]];
+  "open-detail": [app: App];
 }>();
 
 const selectedIds = ref<number[]>([]);
@@ -163,6 +177,11 @@ const selectInstallable = () => {
     .map((item) => item.item.id);
 };
 
+const openFavoriteDetail = (resolved: ResolvedFavoriteItem) => {
+  if (!resolved.selectedApp) return;
+  emit("open-detail", resolved.selectedApp);
+};
+
 const statusClass = (status: FavoriteAvailabilityStatus): string => {
   if (status === "installable") {
     return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300";

src/components/FavoriteFolderSelector.vue

@@ -18,6 +18,7 @@
       </p>
       <div class="mt-5 space-y-2">
         <button
+          v-if="!hasDefaultFolder"
           type="button"
           class="w-full rounded-xl border border-slate-200 px-4 py-3 text-left text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
           @click="emit('select-folder', 'default')"
@@ -34,6 +35,13 @@
           {{ folder.name }}
         </button>
       </div>
+      <button
+        type="button"
+        class="mt-4 w-full rounded-xl border border-dashed border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition hover:border-blue-400 hover:text-blue-600 dark:border-slate-700 dark:text-slate-300 dark:hover:border-blue-500 dark:hover:text-blue-300"
+        @click="emit('create-folder')"
+      >
+        新建收藏夹
+      </button>
       <button
         type="button"
         class="mt-5 w-full rounded-xl bg-slate-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-slate-700 dark:bg-slate-100 dark:text-slate-900"
@@ -46,15 +54,21 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import type { FavoriteFolder } from "@/global/typedefinition";
 
-defineProps<{
+const props = defineProps<{
   show: boolean;
   folders: FavoriteFolder[];
 }>();
 
+const hasDefaultFolder = computed(() =>
+  props.folders.some((folder) => folder.name === "默认收藏夹"),
+);
+
 const emit = defineEmits<{
   close: [];
   "select-folder": [folderId: number | "default"];
+  "create-folder": [];
 }>();
 </script>

src/components/LoginModal.vue

@@ -21,11 +21,6 @@
             <h2 class="text-2xl font-bold text-slate-900 dark:text-white">
               登录星火账号
             </h2>
-            <p
-              class="mt-2 text-sm leading-6 text-slate-500 dark:text-slate-400"
-            >
-              使用论坛账号登录。密码仅直接提交到星火论坛用于换取论坛令牌，不会发送给商店后端。
-            </p>
           </div>
 
           <label class="mb-4 block">

src/components/UserManagementView.vue

@@ -5,7 +5,7 @@
     <div
       class="flex flex-col gap-5 sm:flex-row sm:items-center sm:justify-between"
     >
-      <div class="flex items-center gap-4">
+      <div class="flex min-w-0 items-center gap-4">
         <img
           v-if="user.avatarUrl"
           :src="user.avatarUrl"
@@ -18,16 +18,16 @@
         >
           {{ userInitial }}
         </div>
-        <div>
+        <div class="min-w-0">
           <h1 class="text-2xl font-semibold text-slate-900 dark:text-white">
             用户管理
           </h1>
           <p
-            class="mt-1 text-lg font-medium text-slate-800 dark:text-slate-100"
+            class="mt-1 truncate text-lg font-medium text-slate-800 dark:text-slate-100"
           >
             {{ user.displayName }}
           </p>
-          <p class="text-sm text-slate-500 dark:text-slate-400">
+          <p class="truncate text-sm text-slate-500 dark:text-slate-400">
             @{{ user.username }}
           </p>
           <p class="text-sm text-slate-500 dark:text-slate-400">
@@ -84,13 +84,18 @@
       </label>
       <button
         type="button"
-        class="rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-sky-300 hover:text-sky-600 dark:border-slate-700 dark:text-slate-200 dark:hover:border-sky-500 dark:hover:text-sky-300"
+        class="rounded-full border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 transition hover:border-sky-300 hover:text-sky-600 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700 dark:text-slate-200 dark:hover:border-sky-500 dark:hover:text-sky-300"
+        :disabled="syncing"
         @click="emit('sync-now')"
       >
-        立即同步
+        {{ syncing ? "同步中..." : "立即同步" }}
       </button>
     </div>
 
+    <p v-if="syncMessage" class="text-sm text-sky-600 dark:text-sky-300">
+      {{ syncMessage }}
+    </p>
+
     <section class="space-y-4">
       <div class="flex items-center justify-between gap-4">
         <div>
@@ -158,6 +163,8 @@ const props = defineProps<{
   syncEnabled: boolean;
   loading: boolean;
   error: string;
+  syncing?: boolean;
+  syncMessage?: string;
 }>();
 
 const emit = defineEmits<{

src/modules/appListSync.ts

@@ -29,6 +29,10 @@ export const cloudItemKey = (
   item: Pick<SyncedAppListItem, "origin" | "pkgname">,
 ): string => `${item.origin}:${item.pkgname}`;
 
+export const cloudPackageKey = (
+  item: Pick<SyncedAppListItem, "pkgname">,
+): string => item.pkgname;
+
 export const mergeInstalledApps = (
   currentApps: App[],
   refreshedApps: App[],