@composy/certification-vue

证书管理（认证）功能的 Vue 3 适配层，基于 @composy/certification-core 提供 Vue 生态友好的组件、Composable、插件与类型定义。

• 框架: Vue 3（^3.5）
• 语言: TypeScript（Vue 3 SFC + <script setup lang="ts">）
• 风格: ESM 优先，同时打包 CJS 与 UMD 产物
• License: MIT

安装

# pnpm（推荐）
pnpm add @composy/certification-vue

# npm
npm install @composy/certification-vue

# yarn
yarn add @composy/certification-vue

peer 依赖（需自行安装）：vue@^3.5.32。依赖 @composy/certification-core@^0.0.1 会自动随包安装。

发布仓库：http://npm.longrise.cn:6286/

目录结构

libraries/certification/packages/vue/
├── src/
│   ├── index.ts                       # 包入口，聚合所有公开导出
│   ├── components/
│   │   └── CertificationProvider.vue  # 证书上下文提供组件
│   ├── composables/
│   │   ├── index.ts                   # composable 桶导出
│   │   └── useCertification.ts        # 证书验证响应式封装
│   ├── style/
│   │   └── index.css                  # 基础样式
│   ├── types.ts                       # 共享 TS 类型
│   └── plugin.ts                      # Vue 插件（全局安装）
├── package.json
└── README.md

构建后输出的目录（见 exports/files 字段）：

• es/ — ESM 产物 + .d.ts 类型（import/types 主入口）
• lib/ — CJS 产物（require）
• dist/ — UMD/浏览器产物（unpkg/jsdelivr/browser）
• esm/ — 附加 ESM 构建目录

核心 API 详表

组件（Components）

| 名称 | 类型 | 签名 / Props | 用途 | | ----------------------- | -------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------ | | CertificationProvider | 具名导出（默认类型为单文件组件） | { manager?: CertificationManager; data?: Record<string, unknown>; autoLoad?: boolean } | 向子级提供共享管理器；未传入时继承上层或自行创建 |

Composable

| 名称 | 类型 | 签名 | 用途 | | ---------------------------- | ------------------------------------------- | ------------------------------------ | --------------------------------------------------- | | useCertification(options?) | 函数（导出自 @composy/certification-vue） | { manager?: CertificationManager } | 复用显式/注入的管理器，或创建当前作用域拥有的管理器 |

返回值说明：

• status: Readonly<Ref<'idle' \| 'loading' \| 'success' \| 'error'>> — 证书校验/加载状态（idle 初始态 / loading 处理中 / success 成功 / error 失败）
• error: Readonly<Ref<string \| null>> — 最近的错误信息，无错误时为 null
• lastResult: Readonly<ShallowRef<CertificateVerifyResult \| null>> — 最近一次验证结果
• certificates: Readonly<ShallowRef<CertificateData[]>> — 最近加载的证书列表
• generate(data, options?): Promise<CertificateData | null> — 签发证书并维护操作状态
• activate(certificateId: string): Promise<CertificateData | null> — 激活 pending 证书
• getCertificate(certificateId: string): Promise<CertificateData | null> — 查询单份证书
• verify(certificateId: string): Promise<boolean> — 校验指定证书，内部同步维护 status/error，成功返回 true，失败返回 false
• revoke(certificateId: string, options?): Promise<CertificateData \| null> — 吊销证书并记录原因；失败时更新 error
• refresh(status?): Promise<CertificateData[]> — 重新读取证书列表，可按状态过滤
• exportSnapshot(): Promise<CertificateSnapshot | null> — 导出版本化迁移快照
• importSnapshot(snapshot, options?): Promise<CertificateImportResult | null> — 导入快照并刷新列表
• destroy(): void — 仅销毁该 composable 自行创建的管理器；外部传入或注入的管理器由其所有者释放

类型（Types）

| 名称 | 类型 | 签名 | 用途 | | ---------------------------- | --------------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------- | | CertificationProviderProps | interface（类型导出） | { manager?: CertificationManager; data?: Record<string, unknown>; autoLoad?: boolean } | CertificationProvider 组件的 props 类型定义 | | UseCertificationOptions | interface（类型导出） | { manager?: CertificationManager } | composable 的管理器选项 |

常量 / 插件

| 名称 | 类型 | 签名 | 用途 | | --------------------- | -------------------- | ------------------------ | ----------------------------------------------------------------------- | | CertificationPlugin | Plugin（Vue 插件） | install(app): void | 为 Vue app 注入共享管理器、全局注册 Provider，并在 app 卸载时释放管理器 | | default 导出 | Plugin | 同 CertificationPlugin | 包默认导出即插件本身，可使用 app.use(CertificationPlugin) |

导出入口

| 路径 | 导出 | | ------------------------------------------- | ---------------------------------- | | .（包根） | 上述全部公开 API + 默认插件导出 | | .（useCertification、组件、类型、插件） | 聚合自根入口 | | unpkg/jsdelivr（dist） | 浏览器全局构建，挂载于 window 下 |

使用示例

1. 在 Provider 后代中使用 Composable

<script setup lang="ts">
import { useCertification } from '@composy/certification-vue'
import { ref } from 'vue'

const certificateId = ref<string>('CERT-2024-0001')
const result = ref<string | null>(null)

const { verify } = useCertification()

async function onSubmit() {
  const ok = await verify(certificateId.value)
  result.value = ok ? '校验通过' : '校验失败'
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <!-- eslint-disable-next-line vue/html-self-closing -->
    <input v-model="certificateId" placeholder="证书 ID" />
    <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
    <button type="submit" :disabled="status === 'loading'">校验</button>
  </form>
  <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
  <p v-if="status === 'loading'">校验中…</p>
  <p v-else-if="status === 'error'" class="certification-error">
    {{ error }}
  </p>
  <p v-else-if="result">
    {{ result }}
  </p>
</template>

<style scoped>
.certification-error {
  color: var(--ld-danger-500);
}
</style>

将该页面作为子组件放在 <CertificationProvider><CertificateCheck /></CertificationProvider> 中即可共享 Provider 的管理器；也可以在 app.use(CertificationPlugin) 后直接调用 composable。

2. 全局安装（Vue 插件）

import CertificationPlugin from '@composy/certification-vue'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(CertificationPlugin) // 之后可在全局使用该插件注册的组件/指令
app.mount('#app')

3. 仅使用 Composable（不引入组件）

import { useCertification } from '@composy/certification-vue'

const { verify } = useCertification()

await verify('CERT-2024-0002')

构建脚本 & 验证命令

pnpm build            # 使用 @composy/builder/rolldown 产出 es/esm/lib/dist 与类型
pnpm postbuild        # 自动归一化并校验包产物
pnpm lint             # ESLint（带缓存）
pnpm lint:check       # ESLint 严格模式（缓存 + --max-warnings 0）
pnpm lint:fix         # ESLint 自动修复（带缓存）
pnpm type-check       # ESM vue-tsc 类型检查（读取 .ldesign/tsconfig.json）
pnpm type-check:cjs   # CJS vue-tsc 类型检查（读取 .ldesign/tsconfig.cjs.json）
pnpm release          # ldesign-release publish（发布到 npm.longrise.cn）

产物说明

| 产物 | 格式 | 入口字段 | 说明 | | ------------------------ | ---------------- | ----------------------------- | ----------------------------------------- | | es/index.js + *.d.ts | ESM + TypeScript | import / types / module | 树摇友好，主推荐使用 | | lib/index.cjs | CommonJS | require / main | Node/旧打包器使用 | | dist/index.min.js | UMD（压缩） | unpkg / jsdelivr | 浏览器 CDN 全局引入，全局名为包导出的插件 | | esm/ | ESM（附加） | — | 附加 ESM 构建目录 |

所有子模块路径（./components、./composables 及其 /*）均提供对应 .d.ts 类型与 ESM/CJS 双格式。

备注

• 当前 CertificationProvider、useCertification 及 CertificationPlugin.install() 均复用 Core 的 CertificationManager；签名摘要仍是 SHA-256 内容摘要，不等同于颁发者数字签名。
• CertificationProvider 的 autoLoad 会读取当前管理器中的证书并发出 load 事件；加载失败时发出 error 事件。
• Provider 销毁它自行创建的管理器；显式传入或从上层继承的管理器由其创建方负责释放。
• 插件创建 app 级共享管理器，并在 Vue app 卸载时释放；Vue peer 依赖范围为 ^3.5.32。
• 发布目标仓库为私有镜像 http://npm.longrise.cn:6286/，如需公开发布请调整 publishConfig.registry。