# 卡片视图: 非托管分页列表 (Unmanaged PagingCardPage)

`card/PagingCardPage.svelte` 组件为卡片式布局提供了 UI 和分页控件，同时让您通过 `PagedDataManager` 完全控制数据获取和状态管理。

## 设计目的

该组件是托管卡片列表的非托管对应版本。当您需要将分页数据显示为卡片，但又需要自定义数据获取逻辑或与外部状态库集成时，它是理想的选择。

## 工作原理

该组件是一个**UI外壳**，只接受原始的分页状态和回调作为 props，不接受管理器实例本身。
- **您控制数据：** 您的脚本负责创建 `PagedDataManager`，并将其状态属性逐一传给组件。
- **管理器持有状态：** `PagedDataManager` 实例跟踪当前页码（`pageNo`）、总页数（`pageCount`）、记录总数（`count`）以及当前页数据（`list`）。
- **组件渲染状态：** `PagingCardPage` 根据传入的分页 props 渲染分页控件，并通过 `onPageChange`/`onRowCountChanged` 回调将翻页操作委托给您的管理器。

## 关键依赖
-   **`@ticatec/app-data-manager/PagedDataManager`**: 该组件的"大脑"。您需要创建并管理此对象。
-   **render 配置对象**: 用于自动渲染卡片的配置，包含 component 和 props 属性。

## 如何使用

该模式与非托管数据表格完全相同：创建并管理一个 `PagedDataManager`，然后将其状态属性传递给组件。

1.  **设置您的数据服务与 `PagedDataManager`。**

    ```ts
    import { PagingDataService } from '@ticatec/app-data-service';
    import { PagedDataManager } from '@ticatec/app-data-manager';

    class TenantService extends PagingDataService {
        constructor() {
            super('/api/tenants');
        }
    }
    const service = new TenantService();

    const manager = new PagedDataManager(service, 'id');

    await manager.refresh();
    ```

2.  **在您的页面中使用该组件**

    ```svelte
    <script lang="ts">
        // ... (上面的脚本)
        import PagingCardPage from '@ticatec/uniface-pro-components/card/PagingCardPage';
        import TenantCard from './TenantCard.svelte';

        let page$attrs = {
            title: "非托管租户卡片列表"
        };

        // 配置 render 对象
        let render = {
            component: TenantCard,
            props: {} // 传递给卡片组件的额外属性
        };

        // 分页控件所需的回调，直接委托给管理器
        const onPageChange = (pageNo: number) => {
            manager.setPageNo(pageNo);
        };

        const onRowCountChanged = (pageSize: number) => {
            manager.setRowsPage(pageSize);
        };
    </script>

    <PagingCardPage
        {page$attrs}
        list={manager.list}
        {render}
        total={manager.count}
        pageCount={manager.pageCount}
        pageNo={manager.pageNo}
        {onPageChange}
        {onRowCountChanged}
        gap={12}
        canBeClosed={false}
    />
    ```

    该组件本身不提供新建/刷新按钮或搜索框；如需这些功能，可通过 `searchPanel` snippet 自行传入，或改用托管版本 `card/managed/PagingCardPage`。

## 组件属性 (Props)

-   `page$attrs: PageAttrs`: 包含标题和其他页面级设置的页面属性。**(必需)**
-   `list: Array<any>`: 要显示为卡片的数据项数组。
-   `render: object`: 用于渲染卡片的配置对象，包含 `component` 和 `props` 属性。**(必需)**
-   `total: number`: 数据总条数。**(必需)**
-   `pageCount: number`: 总页数。**(必需)**
-   `pageNo: number`: 当前页码。**(必需)**
-   `onPageChange: OnPageChange`: 页码变化时的回调。**(必需)**
-   `onRowCountChanged: OnPageSizeChange`: 每页条数变化时的回调。**(必需)**
-   `gap?: number`: 卡片之间的间距（像素）。默认为 `12`。
-   `canBeClosed?: boolean`: 页面是否可以关闭。默认为 `false`。
-   `round?: boolean`: 页面是否使用圆角容器。默认为 `true`。
-   `shadow?: boolean`: 页面容器是否显示阴影。默认为 `true`。

## 插槽 (Snippets)

-   `searchPanel?: Snippet`: 可选的搜索面板内容。

## 功能特性

-   基于 PagedDataManager 的分页数据显示
-   内置分页控件
-   灵活的卡片布局，可配置间距
-   使用 render 配置自动渲染卡片