{"_id":"react-mui-cms-ai-drawer","_rev":"31-c2ec87f9a0eb17b821d36189bb2bd2c8","name":"react-mui-cms-ai-drawer","dist-tags":{"latest":"0.1.16"},"versions":{"0.1.14":{"name":"react-mui-cms-ai-drawer","version":"0.1.14","license":"MIT","_id":"react-mui-cms-ai-drawer@0.1.14","maintainers":[{"name":"alxsjw","email":"soojw.jm17@gmail.com"}],"dist":{"shasum":"3a2565f724427c0494315f5ca3cf68865a3f4329","tarball":"https://registry.npmjs.org/react-mui-cms-ai-drawer/-/react-mui-cms-ai-drawer-0.1.14.tgz","fileCount":7,"integrity":"sha512-TKk7kDafx0KVmNjDAirRR0YlOVJY3JIUD88Ea7rjIwefWibWSf0LC4/e5SQEguwe0BMs/nqu13b6zD07L3kgHA==","signatures":[{"sig":"MEUCIC+Iwd0pCKzAjXtEODpTLN7xjEKY+AdXxPW5z08Sv9aMAiEAplPRnfYmEQVELx958R5m10wZNJSrHmLLb9+PnAnydAs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":860457},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","unpkg":"build/umd/CMSAIDrawer.min.js","module":"dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"},"./umd":"./build/umd/CMSAIDrawer.min.js","./react":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"private":false,"scripts":{"test":"react-scripts test","build":"cross-env BABEL_ENV=stable rollup -c ./rollup.config.mjs","eject":"react-scripts eject","start":"react-scripts start","webpack":"webpack --mode production"},"_npmUser":{"name":"alxsjw","email":"soojw.jm17@gmail.com"},"jsdelivr":"build/umd/CMSAIDrawer.min.js","_npmVersion":"9.7.2","description":"一个支持多语言翻译、AI 辅助内容生成的 **React 抽屉组件**，同时提供 **jQuery 安装器**，可在非 React 项目中快速使用。","directories":{},"_nodeVersion":"20.3.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"prop-types":"^15.8.1","localforage":"^1.10.0","react-redux":"^9.2.0","redux-persist":"^6.0.0","immutability-helper":"^3.1.1","react-textarea-autosize":"^8.5.9"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.91.0","rollup":"^4.49.0","webpack":"^5.89.0","web-vitals":"^2.1.4","@babel/core":"^7.23.6","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","react-scripts":"5.0.1","@babel/preset-env":"^7.23.6","rollup-plugin-dts":"^6.2.3","@babel/preset-react":"^7.23.3","@rollup/plugin-json":"^6.1.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-replace":"^5.0.7","@testing-library/react":"^13.4.0","@rollup/plugin-commonjs":"^25.0.8","@testing-library/jest-dom":"^5.17.0","@rollup/plugin-node-resolve":"^15.3.1","@testing-library/user-event":"^13.5.0","@babel/plugin-transform-runtime":"^7.23.6","@types/rollup-plugin-node-globals":"^1.4.4"},"peerDependencies":{"axios":"^1","react":">=17","notistack":"^3.0.2","react-dom":">=17","@mui/material":"^5","framer-motion":">=12","@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5"},"_npmOperationalInternal":{"tmp":"tmp/react-mui-cms-ai-drawer_0.1.14_1756461294942_0.4070215570712612","host":"s3://npm-registry-packages-npm-production"}},"0.1.15":{"name":"react-mui-cms-ai-drawer","version":"0.1.15","license":"MIT","_id":"react-mui-cms-ai-drawer@0.1.15","maintainers":[{"name":"alxsjw","email":"soojw.jm17@gmail.com"}],"dist":{"shasum":"ae5f5e5ab300a55960c49d450fffceb3403ff362","tarball":"https://registry.npmjs.org/react-mui-cms-ai-drawer/-/react-mui-cms-ai-drawer-0.1.15.tgz","fileCount":7,"integrity":"sha512-EqpccMq/hiQfXY+gsRPGVI6je0iPwZo0mHbsQoHeo4M7EF2+LUcaoiZIFfmXc6RwC/5vMKTTh8Ie4ue+Ndaq1Q==","signatures":[{"sig":"MEQCIDiuyxOY0WwzFzx/3XR3XhssZ97kKEkPaNwPIRamz6mxAiAgxhelY2vYvpOcgS86gDEvkS7CmnjuzeEyjBbndhRwsg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":860465},"main":"dist/cjs/index.js","types":"dist/types/index.d.ts","unpkg":"build/umd/CMSAIDrawer.min.js","module":"dist/esm/index.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"},"./umd":"./build/umd/CMSAIDrawer.min.js","./react":{"types":"./dist/types/index.d.ts","import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs"}},"private":false,"scripts":{"test":"react-scripts test","build":"cross-env BABEL_ENV=stable rollup -c ./rollup.config.mjs","eject":"react-scripts eject","start":"react-scripts start","webpack":"webpack --mode production"},"_npmUser":{"name":"alxsjw","email":"soojw.jm17@gmail.com"},"jsdelivr":"build/umd/CMSAIDrawer.min.js","_npmVersion":"9.7.2","description":"一个支持多语言翻译、AI 辅助内容生成的 **React 抽屉组件**，同时提供 **jQuery 安装器**，可在非 React 项目中快速使用。","directories":{},"_nodeVersion":"20.3.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"prop-types":"^15.8.1","localforage":"^1.10.0","react-redux":"^9.2.0","redux-persist":"^6.0.0","immutability-helper":"^3.1.1","react-textarea-autosize":"^8.5.9"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.91.0","rollup":"^4.49.0","webpack":"^5.89.0","web-vitals":"^2.1.4","@babel/core":"^7.23.6","webpack-cli":"^5.1.4","babel-loader":"^9.1.3","react-scripts":"5.0.1","@babel/preset-env":"^7.23.6","rollup-plugin-dts":"^6.2.3","@babel/preset-react":"^7.23.3","@rollup/plugin-json":"^6.1.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-replace":"^5.0.7","@testing-library/react":"^13.4.0","@rollup/plugin-commonjs":"^25.0.8","@testing-library/jest-dom":"^5.17.0","@rollup/plugin-node-resolve":"^15.3.1","@testing-library/user-event":"^13.5.0","@babel/plugin-transform-runtime":"^7.23.6","@types/rollup-plugin-node-globals":"^1.4.4"},"peerDependencies":{"axios":"^1","react":">=17","notistack":"^3.0.2","react-dom":">=17","@mui/material":"^5","framer-motion":">=12","@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5"},"_npmOperationalInternal":{"tmp":"tmp/react-mui-cms-ai-drawer_0.1.15_1756780064538_0.7410522553410361","host":"s3://npm-registry-packages-npm-production"}},"0.1.16":{"name":"react-mui-cms-ai-drawer","version":"0.1.16","private":false,"license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","exports":{".":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs","types":"./dist/types/index.d.ts"},"./react":{"import":"./dist/esm/index.js","require":"./dist/cjs/index.cjs","types":"./dist/types/index.d.ts"},"./umd":"./build/umd/CMSAIDrawer.min.js"},"unpkg":"build/umd/CMSAIDrawer.min.js","jsdelivr":"build/umd/CMSAIDrawer.min.js","dependencies":{"dompurify":"^3.2.7","immutability-helper":"^3.1.1","localforage":"^1.10.0","marked":"^16.3.0","prop-types":"^15.8.1","react-markdown":"^10.1.0","react-redux":"^9.2.0","react-textarea-autosize":"^8.5.9","redux-persist":"^6.0.0","remark-gfm":"^4.0.1"},"peerDependencies":{"@emotion/react":"^11","@emotion/styled":"^11","@mui/icons-material":"^5","@mui/material":"^5","axios":"^1","framer-motion":">=12","notistack":"^3.0.2","react":">=17","react-dom":">=17"},"scripts":{"start":"react-scripts start","build":"cross-env BABEL_ENV=stable rollup -c ./rollup.config.mjs","webpack":"webpack --mode production","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/core":"^7.23.6","@babel/plugin-transform-runtime":"^7.23.6","@babel/preset-env":"^7.23.6","@babel/preset-react":"^7.23.3","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.1","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-terser":"^0.4.4","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","@types/rollup-plugin-node-globals":"^1.4.4","babel-loader":"^9.1.3","react-scripts":"5.0.1","rollup":"^4.49.0","rollup-plugin-dts":"^6.2.3","rollup-plugin-postcss":"^4.0.2","sass":"^1.91.0","web-vitals":"^2.1.4","webpack":"^5.89.0","webpack-cli":"^5.1.4"},"description":"一个支持多语言翻译、AI 辅助内容生成的 **React 抽屉组件**，同时提供 **jQuery 安装器**，可在非 React 项目中快速使用。","_id":"react-mui-cms-ai-drawer@0.1.16","_nodeVersion":"20.3.1","_npmVersion":"9.7.2","dist":{"integrity":"sha512-aE/ERzom02IfgGXO2QR8yEVELEXnDDzoth+r8is6revQr5Wug5VwaiQatQ7EYd/X4j71wLyKIwAEcf2SQoBbxA==","shasum":"c0ef3180632a0dc0865f8a574719271b88e1ada9","tarball":"https://registry.npmjs.org/react-mui-cms-ai-drawer/-/react-mui-cms-ai-drawer-0.1.16.tgz","fileCount":7,"unpackedSize":880771,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAuFdOf1UPdnAFwUxuniGQ5fuFkJ5M/wJ8e1+3jy9scWAiASiglknCRCAZOdRCdjAHzct4M4qSJ4r1ULwD4oSHiYOw=="}]},"_npmUser":{"name":"alxsjw","email":"soojw.jm17@gmail.com"},"directories":{},"maintainers":[{"name":"alxsjw","email":"soojw.jm17@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-mui-cms-ai-drawer_0.1.16_1758533904182_0.9540287985534064"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-28T09:31:29.009Z","modified":"2025-09-22T09:38:24.531Z","0.1.0":"2025-08-28T09:31:29.302Z","0.1.1":"2025-08-28T10:16:23.539Z","0.1.2":"2025-08-28T10:27:51.307Z","0.1.3":"2025-08-29T02:14:36.203Z","0.1.4":"2025-08-29T02:15:18.938Z","0.1.5":"2025-08-29T02:18:30.167Z","0.1.6":"2025-08-29T02:40:06.419Z","0.1.7":"2025-08-29T02:44:01.523Z","0.1.8":"2025-08-29T03:13:20.805Z","0.1.9":"2025-08-29T03:28:21.147Z","0.1.10":"2025-08-29T07:36:34.443Z","0.1.11":"2025-08-29T07:39:42.671Z","0.1.12":"2025-08-29T08:40:52.216Z","0.1.13":"2025-08-29T09:46:57.341Z","0.1.14":"2025-08-29T09:54:55.150Z","0.1.15":"2025-09-02T02:27:44.753Z","0.1.16":"2025-09-22T09:38:24.385Z"},"license":"MIT","description":"一个支持多语言翻译、AI 辅助内容生成的 **React 抽屉组件**，同时提供 **jQuery 安装器**，可在非 React 项目中快速使用。","maintainers":[{"name":"alxsjw","email":"soojw.jm17@gmail.com"}],"readme":"# CMSAIDrawer\n\n一个支持多语言翻译、AI 辅助内容生成的 **React 抽屉组件**，同时提供 **jQuery 安装器**，可在非 React 项目中快速使用。\n\n-   🎯 支持 OpenAI / Gemini 等 AI 模型\n-   🌐 多语言切换与翻译\n-   ⚡️ 可作为 React 组件或 jQuery 插件引入\n-   📦 提供 UMD / ESM 双构建，可直接通过 CDN 使用\n\n---\n\n## 安装\n\n### 通过 npm 安装（React 项目）\n\n```bash\nnpm install react-mui-cms-ai-drawer\n```\n\n⚠️ 注意：你需要在项目中安装以下 package：\n\n```bash\nnpm install react react-dom @mui/material @mui/icons-material @emotion/react @emotion/styled axios framer-motion\n```\n\n### 通过 CDN（jQuery / 浏览器）\n\n```html\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js\"></script>\n<script src=\"https://cdn.jsdelivr.net/npm/react-mui-cms-ai-drawer/build/umd/CMSAIDrawer.min.js\"></script>\n<script>\n\tCMSAIDrawerInstaller($);\n</script>\n```\n\n---\n\n## 使用\n\n### 在 React 中使用\n\n```jsx\nimport React from \"react\";\nimport CMSAIDrawer from \"react-mui-cms-ai-drawer\";\n\nexport default function App() {\n\treturn (\n\t\t<CMSAIDrawer\n\t\t\tsuggestionList={{\n\t\t\t\tshort: {\n\t\t\t\t\tlabel: \"Generate Short Description\",\n\t\t\t\t\ttemplate: \"short_description\",\n\t\t\t\t\tonApply: (lang, text) => console.log(\"Applied:\", text),\n\t\t\t\t\tonClick: () => \"Current value\",\n\t\t\t\t},\n\t\t\t}}\n\t\t\ttranslateList={{\n\t\t\t\tTitle: {\n\t\t\t\t\tlabel: \"Title\",\n\t\t\t\t\tonApply: (lang, value) => console.log(\"Applied:\", value),\n\t\t\t\t\tonClick: () => \"Existing title\",\n\t\t\t\t},\n\t\t\t}}\n\t\t\tai_assistant={{\n\t\t\t\topenai: {\n\t\t\t\t\tapikey: \"YOUR_KEY\",\n\t\t\t\t\tbaseurl: \"https://api.openai.com/v1/chat/completions\",\n\t\t\t\t\tmodel: \"gpt-4o-mini\",\n\t\t\t\t\tname: \"OpenAI\",\n\t\t\t\t\ttemplate: \"openai\",\n\t\t\t\t},\n\t\t\t}}\n\t\t\tselectedLang={0}\n\t\t\tonError={(msg, opt) => console.error(msg, opt)}\n\t\t/>\n\t);\n}\n```\n\n---\n\n### 在 jQuery 中使用\n\n```html\n<div id=\"ai_assistant\"></div>\n<button id=\"openDrawer\">Open</button>\n\n<script>\n\tCMSAIDrawerInstaller($);\n\n\t$(\"#ai_assistant\").CMSAIDrawer({\n\t\topen: false,\n\t\tselectedLang: 0,\n\t\tai_assistant: {\n\t\t\tgemini: {\n\t\t\t\tapikey: \"YOUR_KEY\",\n\t\t\t\tbaseurl:\n\t\t\t\t\t\"https://generativelanguage.googleapis.com/v1beta/models\",\n\t\t\t\tmodel: \"gemini-1.5-flash\",\n\t\t\t\tname: \"Gemini\",\n\t\t\t\ttemplate: \"gemini\",\n\t\t\t},\n\t\t},\n\t\ttranslateList: {\n\t\t\tTitle: {\n\t\t\t\tlabel: \"Title\",\n\t\t\t\tonApply: (lang, value) => alert(\"Applied: \" + value),\n\t\t\t\tonAppend: (lang, value) => alert(\"Appended: \" + value),\n\t\t\t\tonClick: () => \"Current title\",\n\t\t\t},\n\t\t},\n\t\tonError: (msg, opt) => alert(\"Error: \" + msg),\n\t});\n\n\t$(\"#openDrawer\").on(\"click\", () => {\n\t\t$(\"#ai_assistant\").CMSAIDrawer(\"open\");\n\t});\n</script>\n```\n\n---\n\n## Props\n\n### `suggestionList` (object, required)\n\n配置 AI 生成建议的功能入口。  \n每个 key 对应一个功能按钮。\n\n-   **label**: 按钮文字\n-   **onApply(lang, value)**: 应用结果时调用\n-   **onAppend(lang, value)**: 附加结果时调用\n-   **onClick()**: 返回当前输入框的内容\n-   **template**: 模板键值（字符串），必须对应 `templatePath` 文件中的某一项。\n\n---\n\n### `translateList` (object, required)\n\n配置多语言翻译。\n\n-   **label**: 标签文字\n-   **onApply(lang, value)**: 应用翻译时调用\n-   **onAppend(lang, value)**: 附加结果时调用\n-   **onClick()**: 返回原始值\n\n---\n\n### `ai_assistant` (object, required)\n\n配置可用的 AI 服务。  \n每个 key 为服务名（如 `chatgpt`, `grok`, `gemini`）。\n\n-   **apikey**: API Key\n-   **baseurl**: API 基础 URL\n-   **model**: 模型名称\n-   **name**: 显示名称\n-   **template**: `\"openai\"` 或 `\"gemini\"`\n\n---\n\n### `fullScreen` (bool, optional)\n\n是否全屏显示 Drawer。\n\n---\n\n### `templatePath` (string, required)\n\n远程 JSON 模板配置 URL。\n\n---\n\n### `onError(msg, options)` (func, required)\n\n错误回调。`msg` 是错误信息，`options` 可传递给 `notistack` 的 variant。\n\n---\n\n### `selectedLang` (number, required)\n\n当前选中的语言索引。\n\n---\n\n### `actions` (object, optional)\n\n自定义 Drawer 内部按钮文案。  \n可配置以下属性：\n\n-   `apply.label`\n-   `append.label`\n-   `copy.label`\n-   `edit.label`\n-   `cancel.label`\n-   `submit.label`\n\n---\n\n### `templatePath` 格式示例\n\n一个远程 JSON 文件，定义不同 AI 服务的模板及提示语。  \n`CMSAIDrawer` 会根据 `template` 的 key 选择对应的提示。\n\n```json\n{\n\t\"gemini\": {\n\t\t\"news_event\": \"xxx\",\n\t\t\"content_management\": \"xxx\",\n\t\t\"message_card\": \"xxx\",\n\t\t\"prod_description\": \"xxx\",\n\t\t\"short_description\": \"xxx\",\n\t\t\"keywords\": \"xxx\",\n\t\t\"company_profile\": \"xxx\",\n\t\t\"translate\": \"xxx\",\n\t\t\"hashtag\": \"xxx\",\n\t\t\"faq\": \"xxx\"\n\t},\n\t\"openai\": {\n\t\t\"news_event\": \"xxx\",\n\t\t\"content_management\": \"xxx\",\n\t\t\"message_card\": \"xxx\",\n\t\t\"prod_description\": \"xxx\",\n\t\t\"short_description\": \"xxx\",\n\t\t\"keywords\": \"xxx\",\n\t\t\"company_profile\": \"xxx\",\n\t\t\"translate\": \"xxx\",\n\t\t\"hashtag\": \"xxx\",\n\t\t\"faq\": \"xxx\"\n\t},\n\t\"msg\": {\n\t\t\"news_event\": \"Write news and event in {lang}: \",\n\t\t\"content_management\": \"Write page in {lang} about: \",\n\t\t\"message_card\": \"Write message card in {lang}: \",\n\t\t\"prod_description\": \"Product description in {lang}: \",\n\t\t\"short_description\": \"Create a short description for this in {lang}: \",\n\t\t\"keywords\": \"Generate keywords for in {lang}: \",\n\t\t\"company_profile\": \"Give me a company profile description for in {lang}: \",\n\t\t\"translate\": \"Translate into {langto}: \",\n\t\t\"hashtag\": \"Generate hashtags in {lang} for: \",\n\t\t\"faq\": \"Generate faq answer in {lang} for: \"\n\t}\n}\n```\n\n-   `gemini` / `openai`: 定义每种 AI 服务使用的模板 key\n-   `msg`: 定义每个 key 对应的提示语，可以包含占位符如 `{lang}`、`{langto}`\n-   `suggestionList[x].template` 必须与这里的 key 对应\n\n---\n\n## CDN 链接\n\n-   jsDelivr:  \n    `https://cdn.jsdelivr.net/npm/react-mui-cms-ai-drawer/build/umd/CMSAIDrawer.min.js`\n\n-   unpkg:  \n    `https://unpkg.com/react-mui-cms-ai-drawer/build/umd/CMSAIDrawer.min.js`\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}