+
+
+ 开源 Web 打印设计器 · AI 驱动 · 跨平台 +
+ +
+ 
+ 功能特性 · + 快速开始 · + AI 助手 · + 架构 · + 部署 · + FAQ +
+ ++ OpenPrint — 让打印变得简单高效 +
+ \ No newline at end of file diff --git a/env.d.ts b/env.d.ts new file mode 100644 index 0000000..1c055af --- /dev/null +++ b/env.d.ts @@ -0,0 +1,12 @@ +///HTML
" }（仅可信静态内容）。 + +设计原则： +- 间距与对齐要规整（建议控件左/右贴边留白一致，关键元素水平居中）。 +- 坐标铁律：left/top 是相对「内容区（页边距内侧）左上角」的 mm，渲染器会再叠加页边距，所以你写的坐标【不要包含 margin】。给定页面 width/height 与 margin 后，内容区宽 = width - margin.left - margin.right、高 = height - margin.top - margin.bottom；占满整行写 left:0, width:内容区宽，水平居中配合 style.textAlign:'center'。严禁出现 left 等于 margin.left、top 等于 margin.top 这类把页边距算进坐标的写法。 +- 只输出「一段简要中文说明（不超过 3 句）」+ 一个 \`\`\`json 代码块包裹的完整模板。不要输出其他内容。 +- 不依赖真实数据：文字用静态 value；除非用户明确给出字段，否则不要写 binding。 +- 颜色用 hex（如 #1677ff、#333333）或 rgba。` + +const FEW_SHOT: Array<{ role: 'user' | 'assistant'; content: string }> = [ + { + role: 'user', + content: '做一个竖向快递面单，100×150mm，上方标题"快递面单"，中间收件人姓名电话和地址，底部一个条码和右下角一个二维码。', + }, + { + role: 'assistant', + content: `好的，已生成 100×150mm 的竖向快递面单：标题居中、收件信息分区、底部条码 + 右下角二维码。 +（坐标均为相对内容区：页面 100×150、四周 margin=8，内容区宽 = 100-8-8 = 84） + +\`\`\`json +{ + "version": "1.0.0", + "document": { + "type": "report", + "page": { + "width": 100, "height": 150, "unit": "mm", "orientation": "portrait", + "margin": { "top": 8, "bottom": 8, "left": 8, "right": 8 }, + "backgroundColor": "#ffffff" + }, + "sections": [ + { + "type": "body", + "components": [ + { "type": "text", "left": 0, "top": 2, "width": 84, "height": 12, "value": "快递面单", "style": { "fontSize": 20, "fontWeight": "bold", "textAlign": "center" } }, + { "type": "text", "left": 0, "top": 18, "width": 84, "height": 8, "value": "收件人：张三 13800000000", "style": { "fontSize": 11 } }, + { "type": "text", "left": 0, "top": 30, "width": 84, "height": 30, "value": "地址：广东省深圳市南山区科技园路 1 号 XX 大厦 10 层", "style": { "fontSize": 11 } }, + { "type": "text", "left": 0, "top": 64, "width": 84, "height": 8, "value": "托寄物：文件 到付", "style": { "fontSize": 11, "fill": "#555555" } }, + { "type": "barcode", "left": 0, "top": 78, "width": 84, "height": 22, "value": "SF1234567890", "format": "CODE128", "showText": true }, + { "type": "qrcode", "left": 52, "top": 104, "width": 32, "height": 28, "value": "https://example.com/order/SF1234567890" }, + { "type": "text", "left": 0, "top": 104, "width": 48, "height": 28, "value": "请于签收前核对信息", "style": { "fontSize": 10, "fill": "#888888" } } + ] + } + ] + } +} +\`\`\``, + }, + { + role: 'user', + content: '做一个横向会员卡，90×54mm，左侧品牌名和会员等级，右侧会员姓名和大号卡号，底部一条分割线。', + }, + { + role: 'assistant', + content: `已生成 90×54mm 横向会员卡：左侧品牌与等级、右侧姓名与卡号、底部分割线。 +（坐标相对内容区：页面 90×54、四周 margin=6，内容区宽 = 90-6-6 = 78） + +\`\`\`json +{ + "version": "1.0.0", + "document": { + "type": "report", + "page": { + "width": 90, "height": 54, "unit": "mm", "orientation": "landscape", + "margin": { "top": 6, "bottom": 6, "left": 6, "right": 6 }, + "backgroundColor": "#0c447c" + }, + "sections": [ + { + "type": "body", + "components": [ + { "type": "text", "left": 0, "top": 4, "width": 40, "height": 10, "value": "STAR 会员", "style": { "fontSize": 16, "fontWeight": "bold", "fill": "#ffffff" } }, + { "type": "text", "left": 0, "top": 18, "width": 40, "height": 8, "value": "钻石会员", "style": { "fontSize": 11, "fill": "#9fc3ff" } }, + { "type": "text", "left": 46, "top": 6, "width": 32, "height": 10, "value": "李雷", "style": { "fontSize": 15, "fontWeight": "bold", "fill": "#ffffff", "textAlign": "right" } }, + { "type": "text", "left": 46, "top": 20, "width": 32, "height": 10, "value": "NO. 8821 0043", "style": { "fontSize": 14, "fill": "#ffffff", "textAlign": "right", "letterSpacing": 1 } }, + { "type": "line", "left": 0, "top": 34, "width": 78, "height": 0.4, "stroke": "#ffffff", "strokeWidth": 0.4 } + ] + } + ] + } +} +\`\`\``, + }, +] + +/** 组装 system 提示词 */ +export function buildSystemPrompt(): string { + return PROTOCOL_SUMMARY +} + +/** 组装用户提示词（支持「基于当前模板修改」「仅选中控件改写」「数据字段接地」） */ +export function buildUserPrompt(opts: { + prompt: string + currentTemplate?: unknown + selectedControls?: unknown[] + datasourceFields?: string[] +}): string { + const parts: string[] = [] + if (opts.datasourceFields && opts.datasourceFields.length) { + parts.push(`可用数据字段（如用户要求绑定真实数据，请优先使用这些路径）：\n${opts.datasourceFields.join('、')}\n`) + } + if (opts.selectedControls && opts.selectedControls.length) { + parts.push( + `下面是一组「用户当前选中的控件」（坐标 left/top 是相对内容区左上角的 mm）。\n` + + `请按需求改写这些选中控件并【只输出一个控件 JSON 数组】，要求：\n` + + `· 必须保留每个原控件的 id（用于原位替换），不要改变其 type；\n` + + `· 可调整 left/top/width/height/value/style 等，实现重排、对齐、换风格、统一间距等；\n` + + `· 可新增控件（给新的唯一 id，type 合法），也可删除某些选中控件（不输出即可）；\n` + + `· 坐标仍是相对内容区（已扣除页边距），不要再加 margin；\n` + + `· 只输出控件数组，不要包装成完整模板。\n` + + '```json\n' + + JSON.stringify(opts.selectedControls, null, 2) + + '\n```', + ) + } else if (opts.currentTemplate) { + parts.push( + `请在下面这份「当前模板 JSON」的基础上按需求修改，输出完整的新模板（不要只输出 diff）：\n` + + '```json\n' + + JSON.stringify(opts.currentTemplate, null, 2) + + '\n```', + ) + } + parts.push(`需求：${opts.prompt}`) + return parts.join('\n\n') +} + +/** few-shot 示例（user/assistant 成对） */ +export function getFewShot(): Array<{ role: 'user' | 'assistant'; content: string }> { + return FEW_SHOT +} diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..9bf2017 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..9c91254 --- /dev/null +++ b/src/assets/main.css @@ -0,0 +1,59 @@ +:root { + /* 旧变量保留（对齐文档，但品牌变量统一在 theme/brand.css 中） */ + --brand-primary: #1677ff; + --brand-dark: #111827; + --brand-bg: #f5f7fa; + --brand-border: #e5e7eb; +} + +html, +body, +#app { + height: 100%; + margin: 0; + padding: 0; +} + +/* naive-ui Provider 会在 #app 下包一层无样式 div，补齐高度链 */ +#app > div { + height: 100%; +} + +body { + font-family: + Inter, + 'Source Han Sans CN', + 'PingFang SC', + 'Microsoft YaHei', + system-ui, + -apple-system, + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + background: var(--brand-bg); + color: var(--brand-text-1); + overflow: hidden; +} + +/* html.dark 下 body 由 NGlobalStyle 同步 bodyColor；这里加一个过渡让切换更顺 */ +* { + transition: + background-color 0.2s ease, + color 0.2s ease, + border-color 0.2s ease, + box-shadow 0.2s ease; +} +/* 画布/标尺/控件本身不需要过渡，否则拖拽有拖影 */ +canvas, +svg, +svg *, +.fabric-canvas, +canvas * { + transition: none !important; +} + +/* NInputNumber 内部 input 默认左对齐；button-placement="both" 时左右按钮挤压空间， + 统一居中更美观。覆盖内部 .n-input__input-el（naive-ui 无 textAlign prop）。 */ +.n-input-number .n-input__input-el { + text-align: center; +} diff --git a/src/config/ai-settings.ts b/src/config/ai-settings.ts new file mode 100644 index 0000000..a820d47 --- /dev/null +++ b/src/config/ai-settings.ts @@ -0,0 +1,79 @@ +/** + * AI 助手配置 —— 纯前端、零后端、存本地（localStorage）。 + * 走 OpenAI 兼容 /chat/completions 协议：用户自己填 地址 / Key / 模型 ID。 + * 与 print-settings.ts 同套路（window.localStorage + 固定 STORAGE_KEY）。 + */ +export interface AiSettings { + /** OpenAI 兼容的 baseURL，需含 /v1（如 https://api.openai.com/v1） */ + baseURL: string + /** 用户自己的 API Key（明文存本地，仅本地单用户场景） */ + apiKey: string + /** 模型 ID，如 gpt-4o-mini / deepseek-chat / qwen-plus */ + model: string + /** 是否已启用 AI 助手 */ + enabled: boolean +} + +/** 常见 provider 预设（点击即填，用户仍可自行改地址） */ +export interface AiProviderPreset { + label: string + baseURL: string + model: string +} + +export const AI_PROVIDER_PRESETS: AiProviderPreset[] = [ + { label: 'OpenAI', baseURL: 'https://api.openai.com/v1', model: 'gpt-4o-mini' }, + { label: 'DeepSeek', baseURL: 'https://api.deepseek.com/v1', model: 'deepseek-chat' }, + { label: '通义千问', baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1', model: 'qwen-plus' }, + { label: 'Moonshot', baseURL: 'https://api.moonshot.cn/v1', model: 'moonshot-v1-8k' }, + { label: '自定义', baseURL: '', model: '' }, +] + +const STORAGE_KEY = 'openprint:ai:config' + +const DEFAULT_AI_SETTINGS: AiSettings = { + baseURL: 'https://api.openai.com/v1', + apiKey: '', + model: 'gpt-4o-mini', + enabled: false, +} + +function safeRead(): AiSettings { + if (typeof window === 'undefined') return { ...DEFAULT_AI_SETTINGS } + try { + const raw = window.localStorage.getItem(STORAGE_KEY) + if (!raw) return { ...DEFAULT_AI_SETTINGS } + const parsed = JSON.parse(raw) as Partial