@composy/certification-vue

@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）

Composable

返回值说明：

• 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）

常量 / 插件

导出入口

使用示例

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）

产物说明

所有子模块路径（./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。