@finesoft/create-app 0.1.34 → 0.1.36

package/templates/vue/src/lib/controllers/home.ts

@@ -1,36 +1,12 @@
-import { BaseController, makeFlowAction } from "@finesoft/front";
-import type { HomePage, ProductItem, ProductShelf } from "../models/product";
-
-const MOCK_PRODUCTS: ProductItem[] = [
-    {
-        id: "1",
-        itemType: "product",
-        name: "TypeScript Handbook",
-        price: 29.99,
-        imageUrl: "/img/ts.svg",
-        clickAction: makeFlowAction("/products/1"),
-    },
-    {
-        id: "2",
-        itemType: "product",
-        name: "Vite Starter Kit",
-        price: 19.99,
-        imageUrl: "/img/vite.svg",
-        clickAction: makeFlowAction("/products/2"),
-    },
-    {
-        id: "3",
-        itemType: "product",
-        name: "Hono Framework Guide",
-        price: 24.99,
-        imageUrl: "/img/hono.svg",
-        clickAction: makeFlowAction("/products/3"),
-    },
-];
-
-export class HomeController extends BaseController<Record<string, string>, HomePage> {
-    readonly intentId = "home";
+import { PRODUCTS } from "../data/products";
+import { BaseController, type ControllerInput } from "@finesoft/front";
+import { markPublic, makeFlowAction } from "@finesoft/front";
+import type { HomePage, ProductShelf } from "../models/product";
 
+export class HomeController extends BaseController<
+    ControllerInput<Record<string, string>>,
+    HomePage
+> {
     execute(): HomePage {
         const shelf: ProductShelf = {
             id: "featured",
@@ -38,16 +14,35 @@ export class HomeController extends BaseController<Record<string, string>, HomeP
             title: "Featured Products",
             isHorizontal: true,
             seeAllAction: makeFlowAction("/search"),
-            items: MOCK_PRODUCTS,
+            items: PRODUCTS.slice(0, 3),
         };
 
-        return {
-            id: "home",
-            pageType: "home",
-            url: "/",
-            title: "Home",
-            description: "Welcome to Finesoft Front Demo",
-            shelves: [shelf],
-        };
+        return markPublic(
+            {
+                id: "home",
+                pageType: "home",
+                title: "Home",
+                description: "Welcome to Finesoft Front Demo",
+                url: "/",
+                shelves: [shelf],
+            },
+            {
+                shelves: {
+                    id: true,
+                    shelfType: true,
+                    title: true,
+                    isHorizontal: true,
+                    seeAllAction: { kind: true, url: true },
+                    items: {
+                        id: true,
+                        itemType: true,
+                        name: true,
+                        price: true,
+                        imageUrl: true,
+                        clickAction: { kind: true, url: true },
+                    },
+                },
+            },
+        );
     }
 }

package/templates/vue/src/lib/controllers/product-detail.ts

@@ -1,52 +1,83 @@
-import {
-    BaseController,
-    type Container,
-    DEP_KEYS,
-    type Logger,
-    type LoggerFactory,
-} from "@finesoft/front";
+import { DEP_KEYS, type Logger, type LoggerFactory } from "@finesoft/front";
+import { BaseServerController } from "@finesoft/front";
+import { markPublic } from "@finesoft/front";
 import type { ProductPage } from "../models/product";
+import type {
+    ProductDetailControllerFailure as Failure,
+    ProductDetailControllerInput as Input,
+} from "../../../.finesoft/controller-types";
 
-export class ProductDetailController extends BaseController<{ id: number }, ProductPage> {
-    readonly intentId = "product-detail";
-
-    async execute(params: { id: number }, container: Container): Promise<ProductPage> {
-        const loggerFactory = container.resolve<LoggerFactory>(DEP_KEYS.LOGGER_FACTORY);
+export class ProductDetailController extends BaseServerController<Input, ProductPage> {
+    async execute({ params, context }: Input): Promise<ProductPage> {
+        const loggerFactory = await context.get<LoggerFactory>(DEP_KEYS.LOGGER_FACTORY);
         const log: Logger = loggerFactory.loggerFor("ProductDetailController");
         log.info(`Loading product ${params.id}`);
 
+        // Application-owned browsing preference, unrelated to authentication.
+        // getCookie reads the incoming request; setCookie only writes the response.
+        context.responseHeaders.set("cache-control", "private, no-store");
+        if (context.getCookie("last_product") !== String(params.id)) {
+            context.setCookie("last_product", String(params.id), {
+                httpOnly: true,
+                sameSite: "Lax",
+                secure: new URL(context.request.url).protocol === "https:",
+            });
+        }
+
         // Simulated API fetch — replace with real HttpClient call
-        return {
-            id: `product-${params.id}`,
-            pageType: "product",
-            url: `/products/${params.id}`,
-            title: `Product ${params.id}`,
-            description: `Details for product ${params.id}`,
-            product: {
-                id: String(params.id),
-                name: `Product ${params.id}`,
-                price: 29.99,
-                description:
-                    "This is a demo product showcasing BaseController with typed params and DI container usage.",
-                imageUrl: `/img/product-${params.id}.svg`,
+        return markPublic(
+            {
+                id: `product-${params.id}`,
+                pageType: "product",
+                title: `Product ${params.id}`,
+                description: `Details for product ${params.id}`,
+                url: `/products/${params.id}`,
+                product: {
+                    id: String(params.id),
+                    name: `Product ${params.id}`,
+                    price: 29.99,
+                    description:
+                        "This is a demo product showcasing route-inferred params and DI container usage.",
+                    imageUrl: `/img/product-${params.id}.svg`,
+                },
             },
-        };
+            {
+                product: {
+                    id: true,
+                    name: true,
+                    price: true,
+                    description: true,
+                    imageUrl: true,
+                },
+            },
+        );
     }
 
-    fallback(params: { id: number }, error: Error): ProductPage {
-        return {
-            id: `product-${params.id}`,
-            pageType: "product",
-            url: `/products/${params.id}`,
-            title: "Product Not Found",
-            description: error.message,
-            product: {
-                id: String(params.id),
-                name: "Unknown Product",
-                price: 0,
-                description: "Could not load product data.",
-                imageUrl: "/img/placeholder.svg",
+    fallback({ params }: Failure): ProductPage {
+        return markPublic(
+            {
+                id: `product-${params.id}`,
+                pageType: "product",
+                title: "Product Not Found",
+                description: "The product is currently unavailable.",
+                url: `/products/${params.id}`,
+                product: {
+                    id: String(params.id),
+                    name: "Unknown Product",
+                    price: 0,
+                    description: "Could not load product data.",
+                    imageUrl: "/img/placeholder.svg",
+                },
+            },
+            {
+                product: {
+                    id: true,
+                    name: true,
+                    price: true,
+                    description: true,
+                    imageUrl: true,
+                },
             },
-        };
+        );
     }
 }

package/templates/vue/src/lib/controllers/search.ts

@@ -1,58 +1,37 @@
-import { BaseController, makeFlowAction } from "@finesoft/front";
-import type { ProductItem, SearchPage } from "../models/product";
+import { PRODUCTS } from "../data/products";
+import { BaseController } from "@finesoft/front";
+import { markPublic } from "@finesoft/front";
+import type { SearchPage } from "../models/product";
+import type { SearchControllerInput as Input } from "../../../.finesoft/controller-types";
 
-const ALL_PRODUCTS: ProductItem[] = [
-    {
-        id: "1",
-        itemType: "product",
-        name: "TypeScript Handbook",
-        price: 29.99,
-        imageUrl: "/img/ts.svg",
-        clickAction: makeFlowAction("/products/1"),
-    },
-    {
-        id: "2",
-        itemType: "product",
-        name: "Vite Starter Kit",
-        price: 19.99,
-        imageUrl: "/img/vite.svg",
-        clickAction: makeFlowAction("/products/2"),
-    },
-    {
-        id: "3",
-        itemType: "product",
-        name: "Hono Framework Guide",
-        price: 24.99,
-        imageUrl: "/img/hono.svg",
-        clickAction: makeFlowAction("/products/3"),
-    },
-    {
-        id: "4",
-        itemType: "product",
-        name: "SSR Deep Dive",
-        price: 34.99,
-        imageUrl: "/img/ssr.svg",
-        clickAction: makeFlowAction("/products/4"),
-    },
-];
+export class SearchController extends BaseController<Input, SearchPage> {
+    execute({ query }: Input): SearchPage {
+        const term = query.q;
+        const results = term
+            ? PRODUCTS.filter((p) => p.name.toLowerCase().includes(term.toLowerCase()))
+            : PRODUCTS;
 
-export class SearchController extends BaseController<{ q?: string }, SearchPage> {
-    readonly intentId = "search";
-
-    execute(params: { q?: string }): SearchPage {
-        const query = params.q ?? "";
-        const results = query
-            ? ALL_PRODUCTS.filter((p) => p.name.toLowerCase().includes(query.toLowerCase()))
-            : ALL_PRODUCTS;
-
-        return {
-            id: "search",
-            pageType: "search",
-            url: "/search",
-            title: query ? `Search: ${query}` : "All Products",
-            description: `${results.length} result(s)`,
-            query,
-            results,
-        };
+        return markPublic(
+            {
+                id: "search",
+                pageType: "search",
+                title: term ? `Search: ${term}` : "All Products",
+                description: `${results.length} result(s)`,
+                url: "/search",
+                query: term,
+                results,
+            },
+            {
+                query: true,
+                results: {
+                    id: true,
+                    itemType: true,
+                    name: true,
+                    price: true,
+                    imageUrl: true,
+                    clickAction: { kind: true, url: true },
+                },
+            },
+        );
     }
 }

package/templates/vue/src/lib/data/products.ts

@@ -0,0 +1,36 @@
+import type { ProductItem } from "../models/product";
+
+export const PRODUCTS: ProductItem[] = [
+    {
+        id: "1",
+        itemType: "product",
+        name: "TypeScript Handbook",
+        price: 29.99,
+        imageUrl: "/img/ts.svg",
+        clickAction: { url: "/products/1" },
+    },
+    {
+        id: "2",
+        itemType: "product",
+        name: "Vite Starter Kit",
+        price: 19.99,
+        imageUrl: "/img/vite.svg",
+        clickAction: { url: "/products/2" },
+    },
+    {
+        id: "3",
+        itemType: "product",
+        name: "Hono Framework Guide",
+        price: 24.99,
+        imageUrl: "/img/hono.svg",
+        clickAction: { url: "/products/3" },
+    },
+    {
+        id: "4",
+        itemType: "product",
+        name: "SSR Deep Dive",
+        price: 34.99,
+        imageUrl: "/img/ssr.svg",
+        clickAction: { url: "/products/4" },
+    },
+];

package/templates/vue/src/lib/mappers/product.ts

@@ -1,4 +1,4 @@
-import { makeFlowAction, mapEach, type Mapper } from "@finesoft/front";
+import { mapEach, type Mapper } from "@finesoft/front";
 import type { ProductItem } from "../models/product";
 
 /** Raw API response shape */
@@ -16,12 +16,12 @@ const toProductItem: Mapper<ApiProduct, ProductItem> = (raw) => ({
     name: raw.title,
     price: raw.price,
     imageUrl: raw.thumbnail ?? "/img/placeholder.svg",
-    clickAction: makeFlowAction(`/products/${raw.id}`),
+    clickAction: { url: `/products/${raw.id}` },
 });
 
 /**
  * Composed mapper pipeline: ApiProduct[] → ProductItem[]
  *
- * Demonstrates pipe() + mapEach() for data transformation.
+ * Demonstrates mapEach() for data transformation.
  */
 export const mapProducts: Mapper<ApiProduct[], ProductItem[]> = mapEach(toProductItem);

package/templates/vue/src/lib/models/product.ts

@@ -1,15 +1,25 @@
-import type { BaseItem, BasePage, BaseShelf } from "@finesoft/front";
+import type { BasePage } from "@finesoft/front";
+interface BaseItem {
+    readonly id: string;
+}
+interface BaseShelf {
+    readonly id: string;
+    readonly title: string;
+}
 
 export interface ProductItem extends BaseItem {
     itemType: "product";
     name: string;
     price: number;
     imageUrl: string;
+    clickAction?: { readonly url: string };
 }
 
 export interface ProductShelf extends BaseShelf {
     shelfType: "products";
     items: ProductItem[];
+    isHorizontal?: boolean;
+    seeAllAction?: { readonly url: string };
 }
 
 export interface HomePage extends BasePage {
@@ -44,4 +54,5 @@ export interface ErrorPage extends BasePage {
     status: number;
 }
 
+/** 所有页面类型联合 */
 export type AppPage = HomePage | ProductPage | SearchPage | AboutPage | ErrorPage;

package/templates/vue/src/lib/services/api-client.ts

@@ -6,14 +6,14 @@ import { HttpClient, type HttpClientConfig } from "@finesoft/front";
  * Showcases HttpClient subclass pattern with base URL and custom fetch.
  */
 export class ApiClient extends HttpClient {
-    constructor(config?: Partial<HttpClientConfig>) {
+    constructor(config: Partial<HttpClientConfig> & Pick<HttpClientConfig, "fetch">) {
         super({
-            baseUrl: config?.baseUrl ?? "/api",
-            defaultHeaders: {
-                "Content-Type": "application/json",
-                ...config?.defaultHeaders,
-            },
-            fetch: config?.fetch,
+            baseUrl: config.baseUrl ?? "/api",
+            defaultHeaders: { "Content-Type": "application/json", ...config.defaultHeaders },
+            fetch: config.fetch,
+            validateDns: config.validateDns,
+            lookup: config.lookup,
+            allowInternalHosts: config.allowInternalHosts,
         });
     }
 

package/templates/vue/src/main.ts

@@ -1,46 +1,31 @@
-import { startBrowserApp, type Action, type BasePage, type Framework } from "@finesoft/front";
-import { createApp, reactive } from "vue";
+import { createBrowserApp } from "@finesoft/front";
+import { createApp, createSSRApp } from "vue";
+import { app } from "./app-definition";
 import App from "./App.vue";
-import { bootstrap } from "./bootstrap";
-import type { AppPage } from "./lib/models/product";
+import "./styles.css";
 
-void startBrowserApp({
-    bootstrap,
-    mount(target: HTMLElement, { framework }: { framework: Framework }) {
-        const state = reactive<{ page: AppPage | null; loading: boolean }>({
-            page: null,
-            loading: false,
-        });
-        const handleAction = (action: Action) => {
-            void framework.perform(action);
-        };
-        createApp(App, { state, onAction: handleAction }).mount(target);
+const target = document.getElementById("app")!;
+export async function mountApplication(
+    target: HTMLElement,
+    history: "browser" | "memory" = "browser",
+    url?: string,
+) {
+    const handle = await createBrowserApp({ definition: app, target, history, url });
+    const root = (handle.shouldHydrate ? createSSRApp : createApp)(App, { app: handle });
+    root.mount(target);
+    const originalDispose = handle.dispose.bind(handle);
+    let disposal: Promise<void> | undefined;
+    Object.assign(handle, {
+        dispose: () => (disposal ??= originalDispose().finally(() => root.unmount())),
+    });
+    await handle.ready;
+    return handle;
+}
 
-        return ({
-            page,
-            isFirstPage,
-        }: {
-            page: Promise<BasePage> | BasePage;
-            isFirstPage?: boolean;
-        }) => {
-            if (page instanceof Promise) {
-                if (!isFirstPage) state.loading = true;
-                void page.then((p) => {
-                    state.page = p as AppPage;
-                    state.loading = false;
-                });
-            } else {
-                state.page = page as AppPage;
-                state.loading = false;
-            }
-        };
-    },
-    callbacks: {
-        onNavigate(pathname) {
-            console.log("[navigate]", pathname);
-        },
-        onModal(page) {
-            console.log("[modal]", page.title);
-        },
-    },
-});
+export const started = mountApplication(target);
+
+if (import.meta.hot) {
+    import.meta.hot.dispose(async () => {
+        await (await started).dispose();
+    });
+}

package/templates/vue/src/pages/About.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
 import type { AboutPage } from "../lib/models/product";
 
-const { page, onAction: _onAction } = defineProps<{
+const { page } = defineProps<{
     page: AboutPage;
-    onAction?: (action: Action) => void;
 }>();
 </script>
 
 <template>
-    <div>
+    <section class="page page-about">
         <h1>{{ page.title }}</h1>
         <p>{{ page.content }}</p>
-    </div>
+    </section>
 </template>

package/templates/vue/src/pages/Home.vue

@@ -1,38 +1,20 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
 import ProductCard from "../components/ProductCard.vue";
 import type { HomePage } from "../lib/models/product";
 
-const { page, onAction } = defineProps<{ page: HomePage; onAction?: (action: Action) => void }>();
+const { page } = defineProps<{ page: HomePage }>();
 </script>
 
 <template>
-    <div>
+    <section class="page page-home">
         <h1>{{ page.title }}</h1>
         <p>{{ page.description }}</p>
 
-        <section v-for="shelf in page.shelves" :key="shelf.id">
+        <section v-for="shelf in page.shelves" :key="shelf.id" class="shelf-section">
             <h2>{{ shelf.title }}</h2>
             <div class="shelf" :class="{ horizontal: shelf.isHorizontal }">
-                <ProductCard
-                    v-for="item in shelf.items"
-                    :key="item.id"
-                    :item="item"
-                    :on-action="onAction"
-                />
+                <ProductCard v-for="item in shelf.items" :key="item.id" :item="item" />
             </div>
         </section>
-    </div>
+    </section>
 </template>
-
-<style scoped>
-.shelf {
-    display: flex;
-    gap: 1rem;
-    flex-wrap: wrap;
-}
-.shelf.horizontal {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-}
-</style>

package/templates/vue/src/pages/NotFound.vue

@@ -1,22 +1,13 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
-import { NAV_ACTIONS } from "../actions";
 import type { ErrorPage } from "../lib/models/product";
 
-const { page, onAction } = defineProps<{ page: ErrorPage; onAction?: (action: Action) => void }>();
-
-function handleHome(e: MouseEvent) {
-    if (onAction) {
-        e.preventDefault();
-        onAction(NAV_ACTIONS.home);
-    }
-}
+const { page } = defineProps<{ page: ErrorPage }>();
 </script>
 
 <template>
-    <div>
+    <section class="page page-error">
         <h1>{{ page.title }}</h1>
         <p>{{ page.description }}</p>
-        <a href="/" @click="handleHome">← Go Home</a>
-    </div>
+        <a href="/">← Go Home</a>
+    </section>
 </template>

package/templates/vue/src/pages/ProductDetail.vue

@@ -1,34 +1,16 @@
 <script setup lang="ts">
-import type { Action } from "@finesoft/front";
-import { NAV_ACTIONS } from "../actions";
 import type { ProductPage } from "../lib/models/product";
 
-const { page, onAction } = defineProps<{
+const { page } = defineProps<{
     page: ProductPage;
-    onAction?: (action: Action) => void;
 }>();
-
-function handleBack(e: MouseEvent) {
-    if (onAction) {
-        e.preventDefault();
-        onAction(NAV_ACTIONS.home);
-    }
-}
 </script>
 
 <template>
-    <div>
-        <a href="/" @click="handleBack">← Back</a>
+    <section class="page page-product">
+        <a href="/">← Back</a>
         <h1>{{ page.product.name }}</h1>
-        <p class="price">${{ page.product.price.toFixed(2) }}</p>
+        <p class="price price-large">${{ page.product.price.toFixed(2) }}</p>
         <p>{{ page.product.description }}</p>
-    </div>
+    </section>
 </template>
-
-<style scoped>
-.price {
-    font-size: 1.5rem;
-    color: #007bff;
-    font-weight: bold;
-}
-</style>