prepaid-orders（预付订单）

Vue 3 页面组件：数据总览（金额与兑换码统计）+ 预付订单列表（搜索、状态筛选、分页、复制兑换码）。
数据由宿主 受控传入（stats、orders、筛选与分页相关字段），业务通过 回调 更新状态并对接接口。

发布产物：dist/prepaid-orders.js、dist/prepaid-orders.cjs、dist/prepaid-orders.css（入口源码 src/lib/index.ts）。

安装依赖

npm install @yeez-tech/prepaid-orders vue lucide-vue-next

@yeez-tech/prepaid-orders 将 vue、lucide-vue-next 作为 peer，版本需兼容（见包内 peerDependencies）。

接入步骤

1. 应用入口引入样式

在入口文件中增加一行（全局 只引一次）：

import '@yeez-tech/prepaid-orders/style.css'

样式内含本页所需 Tailwind 工具类。若与宿主现有 Tailwind 冲突，可用子应用或 CSS Layer 等方式隔离。

2. 页面中使用 PrepaidOrdersPage

<script setup lang="ts">
import { PrepaidOrdersPage } from '@yeez-tech/prepaid-orders'
import type { PrepaidOrder, PrepaidStats } from '@yeez-tech/prepaid-orders'
import { ref } from 'vue'

const stats = ref<PrepaidStats>({
  amounts: { total: 0, redeemed: 0, refunded: 0, pending: 0 },
  codes: { total: 0, redeemed: 0, unredeemed: 0, refunded: 0 },
})
const orders = ref<PrepaidOrder[]>([])
const searchQuery = ref('')
const filterStatus = ref('全部')
const currentOrderPage = ref(1)

function setSearchQuery(v: string) {
  searchQuery.value = v
}
function setFilterStatus(v: string) {
  filterStatus.value = v
}
function setPage(page: number) {
  currentOrderPage.value = page
}
</script>

<template>
  <PrepaidOrdersPage
    :stats="stats"
    :orders="orders"
    :search-query="searchQuery"
    :filter-status="filterStatus"
    :current-order-page="currentOrderPage"
    :order-items-per-page="10"
    :on-search-query-change="setSearchQuery"
    :on-filter-status-change="setFilterStatus"
    :on-page-change="setPage"
  />
</template>

在回调中请求接口并回写 stats、orders 等；复制兑换码、筛选、翻页会触发上述回调，搜索/筛选变化时组件内部会将页码重置为第 1 页（通过 onPageChange(1)），请同步刷新列表。

服务端分页时：设置 server-pagination 为 true，此时 orders 仅为当前页数据，并传入 total-order-count 表示总条数。

复制： 默认使用浏览器剪贴板并 Toast。若复制成功后需上报日志，可传 on-copy-log（orderId）而不自定义整段 on-copy。若需完全自定义复制逻辑，使用 on-copy（传入后不再走内置复制与 on-copy-log）。

Props 与类型

| Prop | 类型 | 说明 | |------|------|------| | stats | PrepaidStats | 数据总览 | | orders | PrepaidOrder[] | 订单列表；本地分页时为全量或部分数据由你决定 | | searchQuery | string | 搜索关键字 | | filterStatus | string | 如 全部、已兑换、未兑换 等，与列表筛选项一致 | | currentOrderPage | number | 当前页码（从 1 开始） | | orderItemsPerPage | number | 每页条数，默认 10 | | serverPagination | boolean | 是否服务端分页，默认 false | | totalOrderCount | number | 服务端分页时的总条数 |

| 回调 | 参数 | 说明 | |------|------|------| | onSearchQueryChange | v: string | 搜索框内容变化 | | onFilterStatusChange | v: string | 状态下拉变化 | | onPageChange | page: number | 页码变化（含搜索/筛选导致的重置为 1） | | onCopy | payload: CopyRedeemPayload | 可选，完全自定义复制 | | onCopyLog | orderId: string | 可选，内置复制成功后的 orderId 回调（埋点/日志） |

PrepaidOrder、PrepaidStats、CopyRedeemPayload 等见 typings/index.d.ts。

本仓库开发

cd prepaid-orders
npm install
npm run dev

示例 src/App.vue 从 ./lib 引入组件（与安装后 from '@yeez-tech/prepaid-orders' 等价），并在 src/api/prepaidOrders.js 中演示请求。本地演示在 main.ts 中显式引入 src/styles/tailwind.css，以便演示站打包包含完整样式；业务项目接入时只需 import '@yeez-tech/prepaid-orders/style.css'（与 src/lib/index.ts 打进的库样式一致），无需再抄一份 Tailwind 配置。

| 命令 | 作用 | |------|------| | npm run build | 演示站输出到 dist-demo/ | | npm run build:lib | 库产物输出到 dist/ |

本地联调：宿主 package.json 中 "@yeez-tech/prepaid-orders": "file:../prepaid-orders"，在本仓库执行 npm run build:lib 后，在宿主执行 npm install。

TypeScript

类型声明见 typings/index.d.ts。