qrcode-alipay 1.0.0

package/dist/vue.d.cts

@@ -0,0 +1,64 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare const AlipayQRCode: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    size: string | number;
+    margin: number;
+    ariaLabel: string;
+    className: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AlipayQRCode, AlipayQRCode as default };

package/dist/vue.d.ts

@@ -0,0 +1,64 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+
+declare const AlipayQRCode: vue.DefineComponent<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    value: {
+        type: StringConstructor;
+        required: true;
+    };
+    size: {
+        type: PropType<number | string>;
+        default: undefined;
+    };
+    margin: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    className: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    title: string;
+    size: string | number;
+    margin: number;
+    ariaLabel: string;
+    className: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { AlipayQRCode, AlipayQRCode as default };

package/dist/vue.js

@@ -0,0 +1,68 @@
+import {
+  createAlipayQRCode
+} from "./chunk-BECJ3Y2B.js";
+
+// src/vue.ts
+import { defineComponent, h } from "vue";
+function renderVueNode(node) {
+  if (typeof node === "string") return node;
+  return h(
+    node.tag,
+    node.attrs ?? {},
+    node.children?.map((child) => renderVueNode(child))
+  );
+}
+var AlipayQRCode = defineComponent({
+  name: "AlipayQRCode",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: void 0
+    },
+    margin: {
+      type: Number,
+      default: void 0
+    },
+    title: {
+      type: String,
+      default: void 0
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    className: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const descriptor = createAlipayQRCode(props.value, {
+        size: props.size,
+        margin: props.margin,
+        title: props.title,
+        ariaLabel: props.ariaLabel,
+        className: props.className
+      });
+      return h(
+        descriptor.tag,
+        {
+          ...descriptor.attrs,
+          ...attrs
+        },
+        descriptor.children?.map((child) => renderVueNode(child))
+      );
+    };
+  }
+});
+var vue_default = AlipayQRCode;
+export {
+  AlipayQRCode,
+  vue_default as default
+};

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "qrcode-alipay",
+  "version": "1.0.0",
+  "description": "支付宝品牌二维码 SVG 生成器，提供框架无关核心方法和 React/Vue 组件。",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js",
+      "require": "./dist/vue.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "publicDocs",
+    "README.md",
+    "LICENSE",
+    "LEGAL.md"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "packageManager": "pnpm@10.28.2",
+  "scripts": {
+    "build": "tsup src/index.ts src/react.ts src/vue.ts --format esm,cjs --dts --clean",
+    "demo": "vite --host 127.0.0.1 --config demo/vite.config.ts",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "qrcode": "^1.5.4"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "vue": ">=3.3.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^25.0.2",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vue/server-renderer": "^3.5.25",
+    "jsqr": "^1.4.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "sharp": "^0.34.5",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vitest": "^4.0.15",
+    "vue": "^3.5.25"
+  },
+  "keywords": [
+    "qrcode",
+    "alipay",
+    "svg",
+    "react",
+    "vue"
+  ],
+  "author": "marshall.lhy",
+  "license": "SEE LICENSE IN LICENSE"
+}

package/publicDocs/usage.md

@@ -0,0 +1,139 @@
+# qrcode-alipay 使用说明
+
+`qrcode-alipay` 用于生成支付宝品牌二维码。它适合支付页、订阅页、收银台弹窗等需要展示支付宝扫码支付二维码的场景。
+
+## 能力特点
+
+- 核心方法框架无关，可在任意前端框架、SSR 环境或构建脚本中使用。
+- 默认生成自包含 SVG，不依赖远程图片资源。
+- 默认使用支付宝蓝定位点和中心支付宝「支」logo。
+- React 与 Vue 3 提供组件封装，接入时不需要手动处理 SVG 字符串。
+- 二维码使用 `H` 级纠错，并按二维码模块尺寸自适应中心 logo。
+
+## 安装
+
+```bash
+pnpm add qrcode-alipay
+```
+
+也可以使用 npm 或 yarn：
+
+```bash
+npm install qrcode-alipay
+yarn add qrcode-alipay
+```
+
+## 核心 API
+
+### `toSvg(value, options?)`
+
+返回完整的 SVG 字符串，适合直接写入 HTML、服务端模板或保存为文件。
+
+```ts
+import { toSvg } from 'qrcode-alipay';
+
+const svg = toSvg('https://qr.alipay.com/example', {
+  size: 240,
+  title: '支付宝支付二维码',
+});
+```
+
+### `toDataURL(value, options?)`
+
+返回 `data:image/svg+xml` 地址，适合用于 `<img src>`。
+
+```ts
+import { toDataURL } from 'qrcode-alipay';
+
+const src = toDataURL('https://qr.alipay.com/example', {
+  size: 240,
+});
+```
+
+```html
+<img src="..." alt="支付宝支付二维码" />
+```
+
+### `createAlipayQRCode(value, options?)`
+
+返回结构化 SVG descriptor，适合需要自行渲染节点的运行时或框架适配层。
+
+```ts
+import { createAlipayQRCode } from 'qrcode-alipay';
+
+const descriptor = createAlipayQRCode('https://qr.alipay.com/example');
+
+console.log(descriptor.tag); // svg
+console.log(descriptor.metadata.moduleCount);
+```
+
+## React 用法
+
+```tsx
+import { AlipayQRCode } from 'qrcode-alipay/react';
+
+export function CheckoutQRCode({ value }: { value: string }) {
+  return (
+    <AlipayQRCode
+      value={value}
+      size={240}
+      ariaLabel="支付宝支付二维码"
+      className="checkout-qr"
+    />
+  );
+}
+```
+
+React 组件会渲染真实 SVG 节点，不使用 `dangerouslySetInnerHTML`。
+
+## Vue 3 用法
+
+```vue
+<script setup lang="ts">
+import { AlipayQRCode } from 'qrcode-alipay/vue';
+
+defineProps<{
+  value: string;
+}>();
+</script>
+
+<template>
+  <AlipayQRCode
+    :value="value"
+    :size="240"
+    aria-label="支付宝支付二维码"
+    class-name="checkout-qr"
+  />
+</template>
+```
+
+## 配置项
+
+| 参数 | 类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| `size` | `number \| string` | `240` | SVG 根节点的 `width` 和 `height`。不传时是固定 `240`，不会自动变成 `100%`。传字符串时可使用 `100%` 等响应式值。 |
+| `margin` | `number` | `0` | quiet zone，单位为二维码模块。 |
+| `title` | `string` | - | SVG 内部标题，便于辅助技术识别。 |
+| `ariaLabel` | `string` | `Alipay QR code` | SVG 根节点 `aria-label`。 |
+| `className` | `string` | - | SVG 根节点 class。 |
+
+## 尺寸建议
+
+- 常规支付弹窗推荐 `size=240`。
+- 页面主二维码推荐 `size=240` 到 `320`。
+- 小尺寸展示不建议低于 `96`，过小会影响扫码体验。
+- 外层容器可以继续加边框、阴影或说明文字，但不要再额外覆盖中心 logo。
+- `size` 不传默认是 `240`，不是 `100%`。如果需要跟随父容器自适应，请显式传 `size: '100%'`，并确保父容器有稳定的宽高或 `aspect-ratio: 1`。
+
+## 扫码安全建议
+
+- `margin` 默认是 `0`，更适合组件化使用：业务通常会把二维码放在白色卡片、弹窗或带 padding 的容器里，外层留白已经承担 quiet zone。
+- 如果二维码是裸 SVG，外层没有白色 padding，建议传 `margin: 1` 或更高，给扫码器保留边界识别空间。
+- 如果二维码外层背景不是白色，也建议使用白色容器或传入 `margin: 1`，避免边界和背景混在一起。
+
+## 注意事项
+
+- `value` 必须是非空字符串。
+- 默认纠错等级固定为 `H`，不需要业务方单独配置。
+- 默认品牌色和中心 logo 固定，公开 API 不开放品牌样式修改，避免不同业务渲染不一致。
+- 如果使用 `toSvg` 后通过 `innerHTML` 插入页面，请确保 `value` 来自可信业务数据；库内部会转义可访问性文本，但二维码内容本身仍应由业务侧校验。