@sw7d/paper-renderer

@sw7d/paper-renderer

题卡设计器核心渲染组件。纯编辑表面 + HTML 覆盖层交互，无 element-plus 依赖。

安装

npm install @sw7d/paper-renderer

使用

<template>
  <PaperEditor
    ref="editorRef"
    :initialData="documentJson"
    :qrCodeContent="'https://example.com/paper/123'"
    :paperName="'2024年期末考试'"
    :schoolName="'阳光中学'"
    @ready="onReady"
    @save="onSave"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PaperEditor, PaperPreview } from '@sw7d/paper-renderer'
import { usePaperCore } from '@sw7d/paper-renderer'
import type { ContentBlock } from '@sw7d/paper-renderer'
import '@sw7d/paper-renderer/styles'

const editorRef = ref()
const documentJson = ref('{...}')

function onReady() { /* 编辑器就绪 */ }
function onSave(json: string) { /* 保存文档 */ }
</script>

Props

通过 ref 调用的 API

发布流程

发布前确保已登录 npm 账号并拥有发布权限。

1️⃣ 设置 Token（只需一次）

由于账号开启了 2FA 两步验证，不能直接用 npm login，需要用 Granular Access Token：

1. 打开 https://www.npmjs.com/settings/~/tokens
2. 点击 "Generate New Token" → "Granular Access Token"
3. 设置：
   • Token name: 任意（如 publish-token）
   • Packages and scopes: "Read and write"
   • 展开 2FA 选项 → 勾选 "Bypass 2FA for packages"
4. 生成 token 后复制

保存 token 到本地（不要提交到代码仓库！）：

# 写入项目 .npmrc（推荐）
npm set //registry.npmjs.org/:_authToken=你的token

⚠️ 如果报 ENOWORKSPACES 错误，说明在 workspace 目录下受限，退到外层执行后再切回来：

cd d:\workspace-ai\yzk_paper_designer
npm set //registry.npmjs.org/:_authToken=你的token
cd d:\workspace-ai\yzk_paper_designer\paper_designer\paper-renderer

2️⃣ 发布新版本

# 进入包目录
cd d:\workspace-ai\yzk_paper_designer\paper_designer\paper-renderer

# 更新版本号（三选一）
npm version patch   # 修复bug  0.1.0 → 0.1.1
npm version minor   # 加新功能 0.1.0 → 0.2.0
npm version major   # 不兼容   0.1.0 → 1.0.0

# 构建（会同时生成 JS 产物 + .d.ts 类型声明）
npm run build

# 发布（会自动执行 prepublishOnly → npm run build，以防忘记）
npm publish

publishConfig.access = public 已在 package.json 中配置，scoped 包也会公开发布。

3️⃣ 验证发布成功

# 查看包信息
npm view @sw7d/paper-renderer

# 在另一个项目中安装测试
npm install @sw7d/paper-renderer

本地调试（yalc）

开发阶段建议用 yalc 替代 npm link，避免每次修改都要重新发布：

# 1. 全局安装 yalc
npm install -g yalc

# 2. 在 paper-renderer 目录发布到本地仓库（首次）
yalc publish

# 3. 在测试项目引用本地包
cd d:\path\to\test-project
yalc add @sw7d/paper-renderer

# 4. 修改源码后，推送更新到所有引用了它的项目
yalc push

License

MIT