feat(detail): move app details into content view

src/App.vue

@@ -63,7 +63,29 @@
       />
       <div class="px-4 py-6 lg:px-10">
         <section
-          v-if="currentView === 'account'"
+          v-if="currentView === 'detail' && currentApp"
+          data-app-detail-page="detail"
+        >
+          <AppDetailPage
+            :app="currentApp"
+            :screenshots="screenshots"
+            :spark-installed="currentAppSparkInstalled"
+            :apm-installed="currentAppApmInstalled"
+            :logged-in="isLoggedIn"
+            :review-app-key="currentReviewAppKey"
+            :review-tags="currentReviewTags"
+            @back="closeDetail"
+            @install="onDetailInstall"
+            @remove="onDetailRemove"
+            @favorite="onDetailFavorite"
+            @request-login="handleDetailRequestLogin"
+            @open-preview="openScreenPreview"
+            @open-app="openDownloadedApp"
+            @check-install="checkAppInstalled"
+          />
+        </section>
+        <section
+          v-else-if="currentView === 'account'"
           class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900"
         >
           <h1 class="text-2xl font-semibold text-slate-900 dark:text-white">
@@ -106,21 +128,6 @@
       </div>
     </main>
 
-    <AppDetailModal
-      data-app-modal="detail"
-      :show="showModal"
-      :app="currentApp"
-      :screenshots="screenshots"
-      :spark-installed="currentAppSparkInstalled"
-      :apm-installed="currentAppApmInstalled"
-      @close="closeDetail"
-      @install="onDetailInstall"
-      @remove="onDetailRemove"
-      @open-preview="openScreenPreview"
-      @open-app="openDownloadedApp"
-      @check-install="checkAppInstalled"
-    />
-
     <ScreenPreview
       :show="showPreview"
       :screenshots="screenshots"
@@ -227,7 +234,7 @@ import AppHeader from "./components/AppHeader.vue";
 import AppGrid from "./components/AppGrid.vue";
 import HomeView from "./components/HomeView.vue";
 import CategoryBar from "./components/CategoryBar.vue";
-import AppDetailModal from "./components/AppDetailModal.vue";
+import AppDetailPage from "./components/AppDetailPage.vue";
 import ScreenPreview from "./components/ScreenPreview.vue";
 import DownloadQueue from "./components/DownloadQueue.vue";
 import DownloadDetail from "./components/DownloadDetail.vue";
@@ -277,6 +284,11 @@ import {
   isOriginEnabled,
 } from "./modules/storeFilter";
 import { createUpdateCenterStore } from "./modules/updateCenter";
+import {
+  buildReviewAppKey,
+  buildReviewTags,
+  getDisplayApp,
+} from "./modules/appIdentity";
 import type {
   App,
   AppJson,
@@ -288,6 +300,7 @@ import type {
   FlarumLoginPayload,
   SidebarEntry,
   UpdateCenterItem,
+  ReviewTags,
 } from "./global/typedefinition";
 import type { Ref } from "vue";
 import type { IpcRendererEvent } from "electron";
@@ -329,11 +342,12 @@ const isDarkTheme = computed(() => {
 const categories: Ref<Record<string, CategoryInfo>> = ref({});
 const apps: Ref<App[]> = ref([]);
 const activeTab = ref("home");
-const currentView = ref<"default" | "account" | "favorites">("default");
+type MainView = "default" | "account" | "favorites" | "detail";
+const currentView = ref<MainView>("default");
+const detailPreviousView = ref<MainView>("default");
 const selectedCategory = ref("all");
 const searchQuery = ref("");
 const isSidebarOpen = ref(false);
-const showModal = ref(false);
 const showPreview = ref(false);
 const currentScreenIndex = ref(0);
 const screenshots = ref<string[]>([]);
@@ -442,6 +456,23 @@ const entryCounts = computed(() => {
   return counts;
 });
 
+const currentDisplayApp = computed(() => getDisplayApp(currentApp.value));
+
+const clientArch = computed(() => window.apm_store.arch || "amd64");
+
+const currentReviewAppKey = computed(() => {
+  if (!currentDisplayApp.value) return "";
+  return buildReviewAppKey(currentDisplayApp.value, clientArch.value);
+});
+
+const currentReviewTags = computed<ReviewTags | null>(() => {
+  if (!currentDisplayApp.value) return null;
+  return buildReviewTags(currentDisplayApp.value, {
+    clientArch: clientArch.value,
+    distro: "unknown",
+  });
+});
+
 // 方法
 const syncThemePreference = () => {
   document.documentElement.classList.toggle("dark", isDarkTheme.value);
@@ -557,7 +588,8 @@ const fetchAppFromStore = async (
 };
 
 const openDetail = async (app: App | Record<string, unknown>) => {
-  currentView.value = "default";
+  detailPreviousView.value =
+    currentView.value === "detail" ? "default" : currentView.value;
   // 提取 pkgname 和 category（必须存在）
   const pkgname = (app as Record<string, unknown>).pkgname as string;
   const category =
@@ -702,17 +734,14 @@ const openDetail = async (app: App | Record<string, unknown>) => {
   currentApp.value = finalApp;
   currentScreenIndex.value = 0;
   loadScreenshots(displayAppForScreenshots);
-  showModal.value = true;
+  currentView.value = "detail";
 
   currentAppSparkInstalled.value = false;
   currentAppApmInstalled.value = false;
   checkAppInstalled(finalApp);
 
   nextTick(() => {
-    const modal = document.querySelector(
+    window.scrollTo({ top: 0, behavior: "smooth" });
-      '[data-app-modal="detail"] .modal-panel',
-    );
-    if (modal) modal.scrollTop = 0;
   });
 };
 
@@ -762,7 +791,11 @@ const loadScreenshots = (app: App) => {
 };
 
 const closeDetail = () => {
-  showModal.value = false;
+  currentView.value =
+    detailPreviousView.value === "detail"
+      ? "default"
+      : detailPreviousView.value;
+  detailPreviousView.value = "default";
   currentApp.value = null;
 };
 
@@ -1075,6 +1108,14 @@ const onDetailInstall = async (app: App) => {
   await handleInstall(app);
 };
 
+const onDetailFavorite = (app: App) => {
+  logger.info(`Favorite requested for ${app.pkgname}`);
+};
+
+const handleDetailRequestLogin = (message: string) => {
+  requireLogin(message);
+};
+
 const closeUninstallModal = () => {
   showUninstallModal.value = false;
   uninstallTargetApp.value = null;
@@ -1086,7 +1127,7 @@ const onUninstallSuccess = () => {
     refreshInstalledApps();
   }
   // 更新当前详情页状态（如果在显示）
-  if (showModal.value && currentApp.value) {
+  if (currentView.value === "detail" && currentApp.value) {
     checkAppInstalled(currentApp.value);
   }
 };
@@ -1484,7 +1525,7 @@ onMounted(async () => {
       if (e.key === "ArrowLeft") prevScreen();
       if (e.key === "ArrowRight") nextScreen();
     }
-    if (showModal.value && e.key === "Escape") {
+    if (currentView.value === "detail" && e.key === "Escape") {
       closeDetail();
     }
   });

src/__tests__/unit/AppDetailPage.test.ts

@@ -0,0 +1,50 @@
+import { fireEvent, render, screen } from "@testing-library/vue";
+import { describe, expect, it } from "vitest";
+
+import AppDetailPage from "@/components/AppDetailPage.vue";
+import type { App } from "@/global/typedefinition";
+
+const app: 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("AppDetailPage", () => {
+  it("renders as page, emits back, and gates favorite for anonymous users", async () => {
+    const rendered = render(AppDetailPage, {
+      props: {
+        app,
+        screenshots: [],
+        sparkInstalled: false,
+        apmInstalled: false,
+        loggedIn: false,
+        reviewAppKey: "apm:amd64-apm:office:wps",
+        reviewTags: null,
+      },
+    });
+
+    expect(screen.getByText("Office suite")).toBeTruthy();
+    await fireEvent.click(screen.getByRole("button", { name: "返回" }));
+    await fireEvent.click(screen.getByRole("button", { name: "收藏" }));
+
+    expect(rendered.emitted("back")).toHaveLength(1);
+    expect(rendered.emitted("request-login")?.[0]?.[0]).toBe(
+      "收藏应用需要登录星火账号。",
+    );
+  });
+});

src/__tests__/unit/appIdentity.test.ts

@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  buildFavoriteAppKey,
+  buildReviewAppKey,
+  buildReviewTags,
+  getDisplayApp,
+  parsePackageArch,
+} from "@/modules/appIdentity";
+import type { App } from "@/global/typedefinition";
+
+const app: App = {
+  name: "WPS",
+  pkgname: "wps",
+  version: "1.0.0",
+  filename: "wps_1.0.0_amd64.deb",
+  torrent_address: "",
+  author: "",
+  contributor: "",
+  website: "",
+  update: "",
+  size: "",
+  more: "",
+  tags: "",
+  img_urls: [],
+  icons: "",
+  category: "office",
+  origin: "apm",
+  currentStatus: "not-installed",
+};
+
+describe("appIdentity", () => {
+  it("builds favorite and review keys", () => {
+    expect(buildFavoriteAppKey(app)).toBe("app:office:wps");
+    expect(buildReviewAppKey(app, "amd64")).toBe("apm:amd64-apm:office:wps");
+  });
+
+  it("parses package arch and review tags", () => {
+    expect(parsePackageArch(app.filename)).toBe("amd64");
+    expect(
+      buildReviewTags(app, { clientArch: "amd64", distro: "deepin 25" }),
+    ).toMatchObject({
+      origin: "apm",
+      category: "office",
+      pkgname: "wps",
+      packageArch: "amd64",
+    });
+  });
+
+  it("returns selected display app from merged apps", () => {
+    const merged: App = {
+      ...app,
+      isMerged: true,
+      viewingOrigin: "spark",
+      sparkApp: { ...app, origin: "spark" },
+      apmApp: app,
+    };
+    expect(getDisplayApp(merged)?.origin).toBe("spark");
+  });
+});

src/components/AppDetailPage.vue

@@ -0,0 +1,310 @@
+<template>
+  <section
+    v-if="displayApp"
+    class="mx-auto max-w-6xl rounded-3xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900 lg:p-6"
+  >
+    <button
+      type="button"
+      class="mb-5 inline-flex items-center gap-2 rounded-full border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50 hover:text-slate-900 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+      aria-label="返回"
+      @click="emit('back')"
+    >
+      <i class="fas fa-arrow-left"></i>
+      <span>返回</span>
+    </button>
+
+    <div class="grid gap-6 lg:grid-cols-[18rem_minmax(0,1fr)]">
+      <aside class="space-y-5">
+        <div class="text-center">
+          <div
+            class="mx-auto flex h-28 w-28 items-center justify-center overflow-hidden rounded-3xl bg-gradient-to-b from-slate-100 to-slate-200 shadow-lg dark:from-slate-800 dark:to-slate-700"
+          >
+            <img
+              :src="iconPath"
+              alt="icon"
+              class="h-full w-full object-cover"
+              loading="lazy"
+            />
+          </div>
+          <h1 class="mt-4 text-2xl font-bold text-slate-900 dark:text-white">
+            {{ displayApp.name }}
+          </h1>
+          <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">
+            {{ displayApp.pkgname }}
+          </p>
+          <p
+            v-if="displayApp.version"
+            class="mt-1 text-sm text-slate-500 dark:text-slate-400"
+          >
+            {{ displayApp.version }}
+          </p>
+        </div>
+
+        <div
+          class="flex items-center justify-between rounded-2xl border border-slate-200/60 bg-slate-50/70 px-4 py-3 dark:border-slate-800/60 dark:bg-slate-800/50"
+        >
+          <span class="text-sm text-slate-500 dark:text-slate-400">来源</span>
+          <div
+            v-if="app.isMerged"
+            class="flex overflow-hidden rounded-lg border border-slate-200 shadow-sm dark:border-slate-700"
+          >
+            <button
+              v-if="app.sparkApp"
+              type="button"
+              class="px-3 py-1 text-xs font-medium uppercase tracking-wider transition-colors"
+              :class="
+                viewingOrigin === 'spark'
+                  ? 'bg-orange-500 text-white'
+                  : 'bg-slate-100 text-slate-500 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-400 dark:hover:bg-slate-600'
+              "
+              @click="selectOrigin('spark')"
+            >
+              Spark
+            </button>
+            <button
+              v-if="app.apmApp"
+              type="button"
+              class="px-3 py-1 text-xs font-medium uppercase tracking-wider transition-colors"
+              :class="
+                viewingOrigin === 'apm'
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-slate-100 text-slate-500 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-400 dark:hover:bg-slate-600'
+              "
+              @click="selectOrigin('apm')"
+            >
+              APM
+            </button>
+          </div>
+          <span
+            v-else
+            class="rounded-md px-2 py-1 text-xs font-bold uppercase tracking-wider"
+            :class="
+              displayApp.origin === 'spark'
+                ? 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
+                : 'bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400'
+            "
+          >
+            {{ displayApp.origin === "spark" ? "Spark" : "APM" }}
+          </span>
+        </div>
+
+        <div class="space-y-2">
+          <button
+            v-if="!isInstalled"
+            type="button"
+            class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-slate-800 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 disabled:opacity-40 dark:bg-slate-700 dark:hover:bg-slate-600"
+            :disabled="isOtherVersionInstalled"
+            @click="emit('install', displayApp)"
+          >
+            <i class="fas fa-download text-xs"></i>
+            <span>{{ installButtonText }}</span>
+          </button>
+          <div v-else class="flex gap-2">
+            <button
+              type="button"
+              class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl bg-slate-800 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition hover:bg-slate-700 dark:bg-slate-700 dark:hover:bg-slate-600"
+              @click="emit('open-app', displayApp.pkgname, displayApp.origin)"
+            >
+              <i class="fas fa-external-link-alt text-xs"></i>
+              <span>打开</span>
+            </button>
+            <button
+              type="button"
+              class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 transition hover:border-rose-400 hover:bg-rose-50 hover:text-rose-500 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-rose-400"
+              @click="emit('remove', displayApp)"
+            >
+              <i class="fas fa-trash text-xs"></i>
+              <span>卸载</span>
+            </button>
+          </div>
+          <button
+            type="button"
+            class="inline-flex w-full items-center justify-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-600 transition hover:bg-slate-50 hover:text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700"
+            @click="handleFavorite"
+          >
+            <i class="fas fa-star text-xs"></i>
+            <span>收藏</span>
+          </button>
+        </div>
+
+        <dl
+          class="space-y-2 border-t border-slate-200/60 pt-3 text-xs dark:border-slate-800/60"
+        >
+          <div v-if="displayApp.category" class="flex justify-between gap-3">
+            <dt class="text-slate-400">分类</dt>
+            <dd class="truncate text-slate-700 dark:text-slate-300">
+              {{ displayApp.category }}
+            </dd>
+          </div>
+          <div v-if="displayApp.author" class="flex justify-between gap-3">
+            <dt class="text-slate-400">作者</dt>
+            <dd class="truncate text-slate-700 dark:text-slate-300">
+              {{ displayApp.author }}
+            </dd>
+          </div>
+          <div v-if="displayApp.size" class="flex justify-between gap-3">
+            <dt class="text-slate-400">大小</dt>
+            <dd class="text-slate-700 dark:text-slate-300">
+              {{ displayApp.size }}
+            </dd>
+          </div>
+          <div v-if="displayApp.update" class="flex justify-between gap-3">
+            <dt class="text-slate-400">更新</dt>
+            <dd class="text-slate-700 dark:text-slate-300">
+              {{ displayApp.update }}
+            </dd>
+          </div>
+        </dl>
+      </aside>
+
+      <div class="min-w-0 space-y-5">
+        <div
+          class="rounded-2xl border border-slate-200/60 bg-slate-50/50 p-5 dark:border-slate-800/60 dark:bg-slate-800/30"
+        >
+          <h2 class="mb-3 flex items-center gap-2 text-base font-semibold">
+            <i class="fas fa-info-circle text-slate-400"></i>
+            应用详情
+          </h2>
+          <div
+            v-if="displayApp.more.trim() !== ''"
+            class="space-y-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300"
+            v-html="detailHtml"
+          ></div>
+          <p v-else class="text-sm text-slate-400">暂无应用详情</p>
+        </div>
+
+        <div
+          class="rounded-2xl border border-slate-200/60 bg-slate-50/50 p-5 dark:border-slate-800/60 dark:bg-slate-800/30"
+        >
+          <h2 class="mb-3 flex items-center gap-2 text-base font-semibold">
+            <i class="fas fa-images text-slate-400"></i>
+            应用截图
+          </h2>
+          <div v-if="screenshots.length" class="grid gap-3 sm:grid-cols-2">
+            <img
+              v-for="(screen, index) in screenshots"
+              :key="screen"
+              :src="screen"
+              alt="screenshot"
+              class="h-44 w-full cursor-pointer rounded-2xl border border-slate-200/60 object-cover shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-800/60"
+              loading="lazy"
+              @click="emit('open-preview', index)"
+              @error="hideImage"
+            />
+          </div>
+          <p v-else class="text-sm text-slate-400">暂无应用截图</p>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  APM_STORE_BASE_URL,
+  getHybridDefaultOrigin,
+} from "@/global/storeConfig";
+import { getDisplayApp } from "@/modules/appIdentity";
+import type { App, ReviewTags } from "@/global/typedefinition";
+
+const props = defineProps<{
+  app: App;
+  screenshots: string[];
+  sparkInstalled: boolean;
+  apmInstalled: boolean;
+  loggedIn: boolean;
+  reviewAppKey: string;
+  reviewTags: ReviewTags | null;
+}>();
+
+const emit = defineEmits<{
+  back: [];
+  install: [app: App];
+  remove: [app: App];
+  favorite: [app: App];
+  "request-login": [message: string];
+  "open-preview": [index: number];
+  "open-app": [pkgname: string, origin?: "spark" | "apm"];
+  "check-install": [app: App];
+}>();
+
+const viewingOrigin = ref<"spark" | "apm">(
+  props.app.viewingOrigin ?? props.app.origin,
+);
+
+watch(
+  () => props.app,
+  (app) => {
+    if (app.isMerged) {
+      viewingOrigin.value =
+        app.viewingOrigin ??
+        (app.sparkApp ? getHybridDefaultOrigin(app.sparkApp) : "apm");
+    } else {
+      viewingOrigin.value = app.origin;
+    }
+  },
+  { immediate: true },
+);
+
+const appWithSelectedOrigin = computed<App>(() => ({
+  ...props.app,
+  viewingOrigin: viewingOrigin.value,
+}));
+
+const displayApp = computed(() => getDisplayApp(appWithSelectedOrigin.value));
+
+watch(
+  () => displayApp.value,
+  (app) => {
+    if (app) emit("check-install", app);
+  },
+);
+
+const isInstalled = computed(() =>
+  viewingOrigin.value === "spark" ? props.sparkInstalled : props.apmInstalled,
+);
+
+const isOtherVersionInstalled = computed(() =>
+  viewingOrigin.value === "spark" ? props.apmInstalled : props.sparkInstalled,
+);
+
+const installButtonText = computed(() => {
+  if (isOtherVersionInstalled.value) {
+    return viewingOrigin.value === "spark"
+      ? "已安装 APM 版"
+      : "已安装 Spark 版";
+  }
+  return "安装";
+});
+
+const iconPath = computed(() => {
+  if (!displayApp.value) return "";
+  const arch = window.apm_store.arch || "amd64";
+  const finalArch =
+    displayApp.value.origin === "spark" ? `${arch}-store` : `${arch}-apm`;
+  return `${APM_STORE_BASE_URL}/${finalArch}/${displayApp.value.category}/${displayApp.value.pkgname}/icon.png`;
+});
+
+const detailHtml = computed(
+  () => displayApp.value?.more.replace(/\n/g, "<br>") ?? "",
+);
+
+const selectOrigin = (origin: "spark" | "apm") => {
+  viewingOrigin.value = origin;
+  if (displayApp.value) emit("check-install", displayApp.value);
+};
+
+const handleFavorite = () => {
+  if (!displayApp.value) return;
+  if (!props.loggedIn) {
+    emit("request-login", "收藏应用需要登录星火账号。");
+    return;
+  }
+  emit("favorite", displayApp.value);
+};
+
+const hideImage = (event: Event) => {
+  (event.target as HTMLElement).style.display = "none";
+};
+</script>

src/modules/appIdentity.ts

@@ -0,0 +1,44 @@
+import type { App, ReviewTags } from "@/global/typedefinition";
+
+export const parsePackageArch = (filename: string): string => {
+  const match = filename.match(/_([^_]+)\.deb$/);
+  return match?.[1] || "unknown";
+};
+
+export const buildStoreArch = (
+  origin: "spark" | "apm",
+  clientArch: string,
+): string => {
+  return `${clientArch}-${origin === "spark" ? "store" : "apm"}`;
+};
+
+export const buildFavoriteAppKey = (app: App): string => {
+  return `app:${app.category || "unknown"}:${app.pkgname}`;
+};
+
+export const buildReviewAppKey = (app: App, clientArch: string): string => {
+  return `${app.origin}:${buildStoreArch(app.origin, clientArch)}:${app.category || "unknown"}:${app.pkgname}`;
+};
+
+export const getDisplayApp = (app: App | null): App | null => {
+  if (!app) return null;
+  if (!app.isMerged) return app;
+  if (app.viewingOrigin === "spark") return app.sparkApp ?? app.apmApp ?? app;
+  if (app.viewingOrigin === "apm") return app.apmApp ?? app.sparkApp ?? app;
+  return app.sparkApp ?? app.apmApp ?? app;
+};
+
+export const buildReviewTags = (
+  app: App,
+  options: { clientArch: string; distro: string },
+): ReviewTags => {
+  return {
+    origin: app.origin,
+    category: app.category || "unknown",
+    pkgname: app.pkgname,
+    version: app.version,
+    packageArch: parsePackageArch(app.filename),
+    clientArch: options.clientArch,
+    distro: options.distro,
+  };
+};