fix(installed-apps): restore open and detail actions

2026-04-29 19:00:16 +08:00 · 2026-04-15 22:10:02 +08:00
parent fcdd982637
commit 1410a80df5
5 changed files with 386 additions and 1 deletions
--- a/docs/superpowers/plans/2026-04-15-installed-apps-modal-actions.md
+++ b/docs/superpowers/plans/2026-04-15-installed-apps-modal-actions.md
@@ -0,0 +1,152 @@
+# Installed Apps Modal Actions Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Restore launch and detail entry points from the installed-apps modal by wiring explicit `打开` and `查看详情` actions back to the existing parent handlers.
+
+**Architecture:** Keep the fix local to the installed-apps modal and `App.vue`. Add two emitted events from `InstalledAppsModal.vue`, conditionally render the detail action when the app has usable store metadata, and connect those events to the existing `openDownloadedApp()` and `openDetail()` logic in the parent.
+
+**Tech Stack:** Vue 3, TypeScript, Vitest, Testing Library Vue
+
+---
+
+## File Structure
+
+- Modify: `src/components/InstalledAppsModal.vue`
+  Responsibility: render open/detail actions for installed app rows and emit events upward.
+- Modify: `src/App.vue`
+  Responsibility: wire modal events to existing launch/detail handlers.
+- Modify: `src/__tests__/unit/InstalledAppsModal.test.ts`
+  Responsibility: prove action buttons render and emit correctly.
+
+### Task 1: Add Failing Modal Tests
+
+**Files:**
+
+- Modify: `src/__tests__/unit/InstalledAppsModal.test.ts`
+
+- [ ] **Step 1: Write failing tests for open/detail actions**
+
+```ts
+it("renders open and detail actions for a store-backed installed app", async () => {
+  // render with one installed app whose category is not unknown
+  // expect 打开 and 查看详情 buttons to exist
+});
+
+it("emits open-app when clicking 打开", async () => {
+  // click open button
+  // expect emitted()['open-app']
+});
+
+it("emits open-detail when clicking 查看详情", async () => {
+  // click detail button
+  // expect emitted()['open-detail']
+});
+
+it("hides 查看详情 for unknown-category apps", () => {
+  // render app with category unknown
+  // expect no 查看详情 button
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `npx vitest run src/__tests__/unit/InstalledAppsModal.test.ts`
+Expected: FAIL because the modal does not yet render or emit the new actions
+
+### Task 2: Implement Modal Actions
+
+**Files:**
+
+- Modify: `src/components/InstalledAppsModal.vue`
+- Modify: `src/App.vue`
+
+- [ ] **Step 1: Add minimal modal action rendering and emits**
+
+```ts
+defineEmits<{
+  (e: "close"): void;
+  (e: "refresh"): void;
+  (e: "uninstall", app: App): void;
+  (e: "switch-origin", origin: "apm" | "spark"): void;
+  (e: "open-app", app: App): void;
+  (e: "open-detail", app: App): void;
+}>();
+```
+
+- [ ] **Step 2: Add a simple detail-eligibility helper**
+
+```ts
+const canOpenDetail = (app: App) => {
+  return (
+    app.category !== "unknown" ||
+    Boolean(app.more) ||
+    Boolean(app.website) ||
+    Boolean(app.author) ||
+    (app.img_urls?.length ?? 0) > 0
+  );
+};
+```
+
+- [ ] **Step 3: Add 打开 / 查看详情 buttons to each row**
+
+```vue
+<button type="button" @click="$emit('open-app', app)">打开</button>
+<button
+  v-if="canOpenDetail(app)"
+  type="button"
+  @click="$emit('open-detail', app)"
+>
+  查看详情
+</button>
+```
+
+- [ ] **Step 4: Wire parent events to existing handlers**
+
+```vue
+<InstalledAppsModal
+  ...
+  @open-app="openDownloadedApp($event.pkgname, $event.origin)"
+  @open-detail="openDetail"
+/>
+```
+
+- [ ] **Step 5: Run test to verify it passes**
+
+Run: `npx vitest run src/__tests__/unit/InstalledAppsModal.test.ts`
+Expected: PASS
+
+### Task 3: Verification And Commit
+
+**Files:**
+
+- Modify: `src/components/InstalledAppsModal.vue`
+- Modify: `src/App.vue`
+- Modify: `src/__tests__/unit/InstalledAppsModal.test.ts`
+
+- [ ] **Step 1: Run focused modal test**
+
+Run: `npx vitest run src/__tests__/unit/InstalledAppsModal.test.ts`
+Expected: PASS
+
+- [ ] **Step 2: Run repository lint**
+
+Run: `npm run lint`
+Expected: exit 0
+
+- [ ] **Step 3: Run repository build**
+
+Run: `npm run build:vite`
+Expected: exit 0
+
+- [ ] **Step 4: Review final diff**
+
+Run: `git diff -- src/components/InstalledAppsModal.vue src/App.vue src/__tests__/unit/InstalledAppsModal.test.ts docs/superpowers/specs/2026-04-15-installed-apps-modal-actions-design.md docs/superpowers/plans/2026-04-15-installed-apps-modal-actions.md`
+Expected: only installed-app actions and docs changes appear
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/components/InstalledAppsModal.vue src/App.vue src/__tests__/unit/InstalledAppsModal.test.ts docs/superpowers/specs/2026-04-15-installed-apps-modal-actions-design.md docs/superpowers/plans/2026-04-15-installed-apps-modal-actions.md
+git commit -m "fix(installed-apps): restore open and detail actions"
+```
--- a/docs/superpowers/specs/2026-04-15-installed-apps-modal-actions-design.md
+++ b/docs/superpowers/specs/2026-04-15-installed-apps-modal-actions-design.md
@@ -0,0 +1,89 @@
+# Installed Apps Modal Actions Design
+
+## Background
+
+The installed-apps modal currently renders each installed app row with display information and an uninstall button only. It no longer exposes any path to launch an installed app or open that app's detail modal.
+
+As a result:
+
+1. Users cannot launch apps from the installed-apps manager.
+2. Clicking apps that are already listed in the store no longer opens their detail view from that manager.
+
+The parent app already has working handlers for both behaviors:
+
+- `openDownloadedApp(pkgname, origin)` for launching
+- `openDetail(app)` for showing app details
+
+The regression is therefore in the modal interaction layer rather than in the launch backend itself.
+
+## Goals
+
+1. Restore a direct “open app” action in the installed-apps modal.
+2. Restore a “view details” action for installed apps that can be matched to store detail data.
+3. Reuse the existing parent handlers instead of creating a second launch/detail path.
+4. Keep uninstall behavior unchanged.
+5. Keep the change local to the installed-apps modal and its parent wiring.
+
+## Non-Goals
+
+1. Do not redesign the whole installed-apps UI.
+2. Do not change uninstall flow.
+3. Do not add a brand new launcher backend.
+4. Do not change app-detail modal behavior itself.
+
+## Recommended Approach
+
+Add two explicit actions to each installed-app row:
+
+1. `打开` - always available for installed apps, routed to the existing launch handler.
+2. `查看详情` - available only when the app has enough store metadata to open a meaningful detail modal.
+
+The modal emits these actions upward, and `App.vue` wires them to the existing parent methods. This restores behavior with minimal code movement and avoids duplicating launch or detail logic.
+
+## UI Behavior
+
+### Open action
+
+- Every installed app row gets an `打开` button.
+- Clicking it emits the installed app object upward.
+- The parent maps this to `openDownloadedApp(app.pkgname, app.origin)`.
+
+### Detail action
+
+- Installed apps that can be resolved to a store-backed detail view get a `查看详情` button.
+- The modal should treat an app as detail-capable when its data is sufficient for the existing `openDetail` path, specifically when:
+  - it has a non-`unknown` category, or
+  - it already carries enough store-backed fields to be opened meaningfully by the current parent logic.
+- Clicking it emits the app upward.
+- The parent maps this to `openDetail(app)`.
+
+### Uninstall action
+
+- The existing `卸载` button remains unchanged.
+
+## Event Contract
+
+`InstalledAppsModal.vue` should expose two additional emits:
+
+1. `open-app`
+2. `open-detail`
+
+`App.vue` should listen to both and route them to existing functions, not wrappers with new behavior.
+
+## Data Flow
+
+1. `refreshInstalledApps()` continues building the installed app list.
+2. Each installed app row decides whether the detail action is available.
+3. Modal emits the chosen action with the clicked app.
+4. Parent receives the event and invokes the existing launch/detail flow.
+
+## Testing
+
+Add focused unit coverage for the modal:
+
+1. It renders the `打开` button for installed items.
+2. It renders the `查看详情` button only when the app is detail-capable.
+3. It emits `open-app` when the open button is clicked.
+4. It emits `open-detail` when the detail button is clicked.
+
+The tests do not need to re-test the internals of `openDownloadedApp()` or `openDetail()`; they only need to prove the modal restores the event path correctly.
--- a/src/App.vue
+++ b/src/App.vue
@@ -123,6 +123,8 @@
      :apm-available="apmAvailable"
      @close="closeInstalledModal"
      @refresh="refreshInstalledApps"
+      @open-app="openDownloadedApp($event.pkgname, $event.origin)"
+      @open-detail="openDetail"
      @uninstall="uninstallInstalledApp"
      @switch-origin="handleSwitchOrigin"
    />
--- a/src/tests/unit/InstalledAppsModal.test.ts
+++ b/src/tests/unit/InstalledAppsModal.test.ts
@@ -1,7 +1,29 @@
-import { render, screen } from "@testing-library/vue";
+import { fireEvent, render, screen } from "@testing-library/vue";
 import { describe, expect, it } from "vitest";

 import InstalledAppsModal from "@/components/InstalledAppsModal.vue";
+import type { App } from "@/global/typedefinition";
+
+const createApp = (overrides: Partial<App> = {}): App => ({
+  name: "Spark Notes",
+  pkgname: "spark-notes",
+  version: "1.0.0",
+  filename: "spark-notes.deb",
+  torrent_address: "",
+  author: "",
+  contributor: "",
+  website: "",
+  update: "",
+  size: "1 MB",
+  more: "",
+  tags: "",
+  img_urls: [],
+  icons: "",
+  category: "office",
+  origin: "spark",
+  currentStatus: "installed",
+  ...overrides,
+});

 describe("InstalledAppsModal", () => {
  it("keeps scroll chaining inside the modal list", () => {
@@ -22,4 +44,95 @@ describe("InstalledAppsModal", () => {

    expect(scrollContainer?.className).toContain("overscroll-contain");
  });
+
+  it("renders open and detail actions for a store-backed installed app", () => {
+    render(InstalledAppsModal, {
+      props: {
+        show: true,
+        apps: [createApp()],
+        loading: false,
+        error: "",
+        activeOrigin: "spark",
+        storeFilter: "both",
+        apmAvailable: true,
+      },
+    });
+
+    expect(screen.getByRole("button", { name: "打开" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "查看详情" })).toBeTruthy();
+  });
+
+  it("emits open-app when clicking 打开", async () => {
+    const rendered = render(InstalledAppsModal, {
+      props: {
+        show: true,
+        apps: [createApp()],
+        loading: false,
+        error: "",
+        activeOrigin: "spark",
+        storeFilter: "both",
+        apmAvailable: true,
+      },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: "打开" }));
+
+    expect(rendered.emitted("open-app")).toHaveLength(1);
+    expect(rendered.emitted("open-app")?.[0]?.[0]).toMatchObject({
+      pkgname: "spark-notes",
+    });
+  });
+
+  it("emits open-detail when clicking 查看详情", async () => {
+    const rendered = render(InstalledAppsModal, {
+      props: {
+        show: true,
+        apps: [createApp()],
+        loading: false,
+        error: "",
+        activeOrigin: "spark",
+        storeFilter: "both",
+        apmAvailable: true,
+      },
+    });
+
+    await fireEvent.click(screen.getByRole("button", { name: "查看详情" }));
+
+    expect(rendered.emitted("open-detail")).toHaveLength(1);
+    expect(rendered.emitted("open-detail")?.[0]?.[0]).toMatchObject({
+      pkgname: "spark-notes",
+    });
+  });
+
+  it("shows 查看详情 for metadata-rich unknown-category apps", () => {
+    render(InstalledAppsModal, {
+      props: {
+        show: true,
+        apps: [createApp({ category: "unknown", more: "Has store metadata" })],
+        loading: false,
+        error: "",
+        activeOrigin: "spark",
+        storeFilter: "both",
+        apmAvailable: true,
+      },
+    });
+
+    expect(screen.getByRole("button", { name: "查看详情" })).toBeTruthy();
+  });
+
+  it("hides 查看详情 for unknown-category apps", () => {
+    render(InstalledAppsModal, {
+      props: {
+        show: true,
+        apps: [createApp({ category: "unknown" })],
+        loading: false,
+        error: "",
+        activeOrigin: "spark",
+        storeFilter: "both",
+        apmAvailable: true,
+      },
+    });
+
+    expect(screen.queryByRole("button", { name: "查看详情" })).toBeNull();
+  });
 });
--- a/src/components/InstalledAppsModal.vue
+++ b/src/components/InstalledAppsModal.vue
@@ -146,6 +146,23 @@
                  </div>
                </div>
              </div>
+              <button
+                type="button"
+                class="inline-flex items-center gap-2 rounded-2xl border border-slate-300/70 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
+                @click="$emit('open-app', app)"
+              >
+                <i class="fas fa-play"></i>
+                打开
+              </button>
+              <button
+                v-if="canOpenDetail(app)"
+                type="button"
+                class="inline-flex items-center gap-2 rounded-2xl border border-brand/30 px-4 py-2 text-sm font-semibold text-brand transition hover:bg-brand/10"
+                @click="$emit('open-detail', app)"
+              >
+                <i class="fas fa-circle-info"></i>
+                查看详情
+              </button>
              <button
                type="button"
                class="inline-flex items-center gap-2 rounded-2xl border border-rose-300/60 px-4 py-2 text-sm font-semibold text-rose-600 transition hover:bg-rose-50 disabled:opacity-50"
@@ -178,6 +195,16 @@ const getIconUrl = (app: App) => {
  return `${APM_STORE_BASE_URL}/${finalArch}/${app.category}/${app.pkgname}/icon.png`;
 };

+const canOpenDetail = (app: App) => {
+  return (
+    app.category !== "unknown" ||
+    Boolean(app.more) ||
+    Boolean(app.website) ||
+    Boolean(app.author) ||
+    (app.img_urls?.length ?? 0) > 0
+  );
+};
+
 defineProps<{
  show: boolean;
  apps: App[];
@@ -193,6 +220,8 @@ defineEmits<{
  (e: "refresh"): void;
  (e: "uninstall", app: App): void;
  (e: "switch-origin", origin: "apm" | "spark"): void;
+  (e: "open-app", app: App): void;
+  (e: "open-detail", app: App): void;
 }>();

 const onOverlayWheel = (e: WheelEvent) => {