distribution-keys（分销密钥）

Vue 3 页面组件：分销账户信息、密钥列表与分页、开通/关闭账户与添加密钥 等 UI。
数据由宿主 受控传入（isAccountOpen、accountId、keys），业务通过 回调 props（onOpenAccount、onAddKey 等）调接口后再 回写 props。

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

安装依赖

npm install @yeez-tech/distribution-keys vue @arco-design/web-vue lucide-vue-next dayjs

@yeez-tech/distribution-keys 将上述除自身外的包作为 peer，版本需满足：vue ^3.5、@arco-design/web-vue ^2.50、lucide-vue-next ^0.40、dayjs ^1.11（具体以 package.json 的 peerDependencies 为准）。

接入步骤（按顺序做即可）

1. 应用入口：注册 Arco + 引入本包样式

main.ts（或等价入口）中：

import { createApp } from "vue";
import ArcoVue from "@arco-design/web-vue";
import "@arco-design/web-vue/dist/arco.css";
import "@yeez-tech/distribution-keys/style.css";
import App from "./App.vue";

createApp(App).use(ArcoVue).mount("#app");

distribution-keys/style.css 内含本页所需 Tailwind 工具类，全局 只引一次。若与宿主现有 Tailwind 冲突，可用子应用或 CSS Layer 等方式隔离。

2. 页面里使用 DistributionKeysPage

<script setup lang="ts">
import { DistributionKeysPage } from '@yeez-tech/distribution-keys'
import type { DistributionKeyItem, AddKeyPayload } from '@yeez-tech/distribution-keys'
import { ref } from 'vue'

const isAccountOpen = ref(false)
const accountId = ref('')
const keys = ref<DistributionKeyItem[]>([])

async function onOpenAccount() {
  // await 你的开通接口，成功后更新下面两个 ref
  isAccountOpen.value = true
  accountId.value = '...'
}

async function onConfirmCloseAccount() {
  // await 你的关闭接口
  isAccountOpen.value = false
}

async function onAddKey(payload: AddKeyPayload) {
  // await 创建密钥并重新拉取列表，再赋值 keys
  keys.value = [...keys.value, { id: 'new', ... }]
}

async function onDeleteKey(keyId: string) {
  // await 删除并重新拉取列表
  keys.value = keys.value.filter((k) => k.id !== keyId)
}
</script>

<template>
  <DistributionKeysPage
    :is-account-open="isAccountOpen"
    :account-id="accountId"
    :keys="keys"
    :key-items-per-page="6"
    :on-open-account="onOpenAccount"
    :on-confirm-close-account="onConfirmCloseAccount"
    :on-add-key="onAddKey"
    :on-delete-key="onDeleteKey"
  />
</template>

组件会对这些回调 await：成功时由你在回调里改数据；失败请 throw，组件会提示错误。若未绑定某个必填回调，会 Toast 提示需配置。 为避免宿主二次弹窗（如验证码）被叠层遮挡，添加密钥与关闭账户在调用宿主回调前会先关闭本组件弹窗。

可选： 需要自定义复制行为时增加 :on-copy="..."；需要改复制相关提示文案时增加 :labels="..."（类型为 DistributionKeysPageLabels，见 typings/index.d.ts）。

Props 与数据类型

| Prop | 类型 | 说明 | | ------------------ | ----------------------- | -------------------------------------------------- | | isAccountOpen | boolean | 是否已开通分销账户 | | accountId | string | 分销账户 ID（未开通可传 ''） | | keys | DistributionKeyItem[] | 密钥列表 | | keyItemsPerPage | number | 每页条数，默认 6 | | currentKeyPage | number | 服务端分页时的当前页（从 1 开始） | | serverPagination | boolean | 是否服务端分页；为 true 时 keys 视为当前页数据 | | totalKeyCount | number | 服务端分页总条数（用于计算总页数） |

DistributionKeyItem：id、name、content、expiryDate、addedDate、lastUsed 均为 string（展示用）。

| 回调 prop | 参数 | 说明 | | ---------------------------------- | ------------------------ | ---------------------------------------- | | onOpenAccount | — | 开通账户 | | onConfirmCloseAccount | — | 关闭确认弹窗里确认关闭 | | onAddKey | payload: AddKeyPayload | name、content、expiryDate? | | onDeleteKey | keyId: string | 删除指定密钥 | | onPageChange | page: number | 页码变化（服务端分页时用于拉取新页数据） | | onCopy | text: string | 可选，自定义复制 | | onAddKeyModalVisibleChange | visible: boolean | 添加密钥弹窗显隐变化回调 | | onCloseAccountModalVisibleChange | visible: boolean | 关闭账户弹窗显隐变化回调 |

AddKeyPayload 字段：

• name: string
• content: string
• expiryDate?: string（可选；仅在启用密钥有效期并选择日期时传值）

本仓库开发

克隆后在本目录：

npm install
npm run dev

示例页 src/App.vue 使用 import { DistributionKeysPage } from './lib'，与安装后 from '@yeez-tech/distribution-keys' 等价；样式随 ./lib 入口加载，不要在 main.ts 再单独引一遍本仓库的 tailwind.css。

| 命令 | 作用 | | ------------------- | --------------------------------------- | | npm run build | 演示站打包到 dist-demo/ | | npm run build:lib | 库打包到 dist/，供发布或 file: 引用 |

其它项目用本地包联调时，在宿主 package.json 写 "@yeez-tech/distribution-keys": "file:../distribution-keys"，先在本仓库执行 npm run build:lib，再在宿主执行 npm install。

接口示例可参考 src/services/distribution.ts（需自行接真实后端）。

TypeScript

类型见 typings/index.d.ts：DistributionKeysPageProps、DistributionKeyItem、AddKeyPayload、DistributionKeysPageLabels 等。