{"_id":"@ale9012/ota-renderer","name":"@ale9012/ota-renderer","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ale9012/ota-renderer","version":"1.0.0","description":"OTA页面渲染器 - 用于渲染后台设计的页面","author":{"name":"Viitto Team"},"license":"MIT","main":"./dist/ota-renderer.js","module":"./dist/ota-renderer.mjs","types":"./dist/index.d.ts","style":"./dist/ota-renderer.css","exports":{".":{"import":"./dist/ota-renderer.mjs","require":"./dist/ota-renderer.js","types":"./dist/index.d.ts","style":"./dist/ota-renderer.css"}},"keywords":["ota","page-renderer","vue3","page-builder"],"peerDependencies":{"vue":"^3.3.0"},"repository":{"type":"git","url":"git+https://github.com/viitto/ota-renderer.git"},"_id":"@ale9012/ota-renderer@1.0.0","gitHead":"770c6bd651d0f834553cc2cac4daf71b4a89fb7b","bugs":{"url":"https://github.com/viitto/ota-renderer/issues"},"homepage":"https://github.com/viitto/ota-renderer#readme","_nodeVersion":"22.4.1","_npmVersion":"10.9.0","dist":{"integrity":"sha512-n8DkTNF0roPegIXNMYDmex7DQ3Ljyp5C2/qfIBbg7z8bsOHu3Fzi3o3ScXEoj6RFLkuphzlG7P+Dp04aPMrWRw==","shasum":"65071af4c48da284bcffc16588d0e1317d9457e1","tarball":"https://registry.npmjs.org/@ale9012/ota-renderer/-/ota-renderer-1.0.0.tgz","fileCount":43,"unpackedSize":3056109,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCTo4tFTLiW44yNpN8QdgKuGCbddDPx0LDDFPGvDOWrjgIgRXKiAym2yC2B/iOceeGnwleWLlfKoffC4oFBArXkw40="}]},"_npmUser":{"name":"ale9012","email":"lochao@oytour.com"},"directories":{},"maintainers":[{"name":"ale9012","email":"lochao@oytour.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ota-renderer_1.0.0_1764646098374_0.6481902139831439"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-02T03:28:18.252Z","1.0.0":"2025-12-02T03:28:18.603Z","modified":"2025-12-02T03:28:18.854Z"},"maintainers":[{"name":"ale9012","email":"lochao@oytour.com"}],"description":"OTA页面渲染器 - 用于渲染后台设计的页面","homepage":"https://github.com/viitto/ota-renderer#readme","keywords":["ota","page-renderer","vue3","page-builder"],"repository":{"type":"git","url":"git+https://github.com/viitto/ota-renderer.git"},"author":{"name":"Viitto Team"},"bugs":{"url":"https://github.com/viitto/ota-renderer/issues"},"license":"MIT","readme":"# OTA页面渲染器\n\n> 独立的页面渲染组件，可在项目内使用，也可打包发布到npm供用户端使用。\n\n## 📦 项目内使用（本地引用）\n\n### 在预览页面使用\n\n```vue\n<template>\n  <OTAPageRenderer :page-data=\"pageData\" />\n</template>\n\n<script setup>\nimport { OTAPageRenderer } from '@/renderer'\nimport type { PageData } from '@/renderer/types'\n\nconst pageData = ref<PageData>({\n  metadata: {\n    pageTitle: '首页',\n    backgroundColor: '#ffffff',\n    backgroundImage: '',\n    // ...\n  },\n  components: [\n    {\n      id: 'comp-1',\n      type: 'text',\n      props: {\n        content: 'Hello World',\n        // ...\n      }\n    }\n  ]\n})\n</script>\n```\n\n## 🚀 独立打包发布\n\n### 1. 构建npm包\n\n```bash\n# 在项目根目录执行\nnpm run build:renderer\n\n# 输出目录: src/renderer/dist/\n```\n\n### 2. 发布到npm\n\n```bash\n# 重要：必须在 src/renderer/ 目录下运行，而不是 dist/ 目录\ncd src/renderer\nnpm publish --access public\n```\n\n**注意**：\n- `npm publish` 必须在包含 `package.json` 的目录（`src/renderer/`）下运行\n- `package.json` 中的 `files` 字段已配置为只包含 `dist` 目录，发布时会自动包含构建产物\n- 发布前确保已登录 npm：`npm login`\n\n### 3. 用户端安装使用\n\n```bash\n# 用户端安装\nnpm install @viitto/ota-renderer\n```\n\n```vue\n<!-- 用户端使用 -->\n<template>\n  <OTAPageRenderer :page-data=\"pageDataFromAPI\" />\n</template>\n\n<script setup>\nimport { OTAPageRenderer } from '@viitto/ota-renderer'\n\n// 从后台API获取页面数据\nconst pageData = await fetchPageData()\n</script>\n```\n\n## 📝 数据格式\n\n### PageData 类型定义\n\n```typescript\ninterface PageData {\n  metadata: {\n    pageTitle?: string\n    backgroundColor?: string\n    backgroundImage?: string\n    backgroundSize?: string\n    backgroundPosition?: string\n    backgroundRepeat?: string\n  }\n  components: Array<{\n    id: string\n    type: string  // 组件类型\n    props: Record<string, any>  // 组件属性\n    children?: ComponentNode[]  // 子组件\n    enabled?: boolean  // 是否启用\n  }>\n}\n```\n\n### 示例数据\n\n```json\n{\n  \"metadata\": {\n    \"pageTitle\": \"酒店预订首页\",\n    \"backgroundColor\": \"#f5f5f5\"\n  },\n  \"components\": [\n    {\n      \"id\": \"banner-1\",\n      \"type\": \"banner\",\n      \"props\": {\n        \"image\": \"https://example.com/banner.jpg\",\n        \"title\": \"欢迎预订\",\n        \"height\": \"400px\"\n      }\n    },\n    {\n      \"id\": \"card-1\",\n      \"type\": \"card\",\n      \"props\": {\n        \"title\": \"热门酒店\",\n        \"description\": \"精选推荐\"\n      }\n    }\n  ]\n}\n```\n\n## 🎨 支持的组件类型\n\n### 基础组件\n- `text` - 文本\n- `button` - 按钮\n- `image` - 图片\n\n### 布局组件\n- `container` - 容器\n- `grid-container` - 网格容器\n- `spacer` - 空白\n- `divider` - 分割线\n\n### 业务组件\n- `card` - 卡片\n- `banner` - Banner\n- `parallax` - 视差容器\n- `carousel` - 轮播图\n- `image-gallery` - 图片画廊\n- `video` - 视频\n- `searchBox` - 搜索框\n\n### 全局组件\n- `floating-ad` - 浮动广告\n- `modal-ad` - 弹窗广告\n\n## 🔧 配置说明\n\n### vite.config.renderer.ts\n\n独立打包配置，将 Vue 作为外部依赖，让用户自己安装。\n\n### package.json\n\n定义了 npm 包的元信息和导出配置。\n\n## 📌 注意事项\n\n1. **依赖隔离**：渲染器不依赖后台业务代码（stores、api等）\n2. **Vue版本**：需要 Vue 3.3.0+\n3. **类型支持**：完整的TypeScript类型定义\n4. **按需加载**：组件使用 defineAsyncComponent 懒加载\n\n## 🐛 调试\n\n### 本地调试\n\n在项目内直接引用 `@/renderer` 即可实时调试。\n\n### 查看打包结果\n\n```bash\nnpm run build:renderer\n# 查看 dist-renderer/ 目录\n```\n\n## 📄 License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-5523c46ddd6d69dbb8645f2f473be27e"}