1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[8221],{226:(e,n,t)=>{t.d(n,{R:()=>c,x:()=>l});var r=t(8225);const s={},i=r.createContext(s);function c(e){const n=r.useContext(i);return r.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:c(e.components),r.createElement(i.Provider,{value:n},e.children)}},9218:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>o,contentTitle:()=>l,default:()=>p,frontMatter:()=>c,metadata:()=>r,toc:()=>a});const r=JSON.parse('{"id":"tutorial-extras/toolkit-package","title":"Toolkit Package \u4f7f\u7528\u6307\u5357","description":"ReactPress Toolkit \u662f\u4e00\u4e2a\u57fa\u4e8e TypeScript \u7684 API \u5ba2\u6237\u7aef\u5de5\u5177\u5305\uff0c\u4ece OpenAPI/Swagger \u89c4\u8303\u81ea\u52a8\u751f\u6210\uff0c\u7528\u4e8e\u4e0e ReactPress \u540e\u7aef\u670d\u52a1\u4ea4\u4e92\u3002","source":"@site/tutorial/tutorial-extras/toolkit-package.md","sourceDirName":"tutorial-extras","slug":"/tutorial-extras/toolkit-package","permalink":"/zh/docs/tutorial-extras/toolkit-package","draft":false,"unlisted":false,"editUrl":"https://github.com/fecommunity/reactpress/tutorial/tutorial-extras/toolkit-package.md","tags":[],"version":"current","sidebarPosition":4,"frontMatter":{"sidebar_position":4,"title":"Toolkit Package \u4f7f\u7528\u6307\u5357"},"sidebar":"tutorialSidebar","previous":{"title":"ReactPress 3.0 \u5e73\u53f0\u7248","permalink":"/zh/docs/tutorial-extras/reactpress-3-0"},"next":{"title":"Docker \u90e8\u7f72\u6307\u5357","permalink":"/zh/docs/tutorial-extras/docker-deployment"}}');var s=t(7557),i=t(226);const c={sidebar_position:4,title:"Toolkit Package \u4f7f\u7528\u6307\u5357"},l="@fecommunity/reactpress-toolkit \u4f7f\u7528\u6307\u5357",o={},a=[{value:"\u6982\u8ff0",id:"\u6982\u8ff0",level:2},{value:"\u5b89\u88c5",id:"\u5b89\u88c5",level:2},{value:"\u5feb\u901f\u5f00\u59cb",id:"\u5feb\u901f\u5f00\u59cb",level:2},{value:"\u4f7f\u7528\u9ed8\u8ba4 API \u5b9e\u4f8b",id:"\u4f7f\u7528\u9ed8\u8ba4-api-\u5b9e\u4f8b",level:3},{value:"\u4f7f\u7528\u547d\u540d\u5bfc\u51fa",id:"\u4f7f\u7528\u547d\u540d\u5bfc\u51fa",level:3},{value:"\u914d\u7f6e",id:"\u914d\u7f6e",level:2},{value:"\u4f01\u4e1a\u7ea7\u7279\u6027",id:"\u4f01\u4e1a\u7ea7\u7279\u6027",level:2},{value:"\u81ea\u52a8\u91cd\u8bd5\u673a\u5236",id:"\u81ea\u52a8\u91cd\u8bd5\u673a\u5236",level:3},{value:"\u8bf7\u6c42/\u54cd\u5e94\u62e6\u622a\u5668",id:"\u8bf7\u6c42\u54cd\u5e94\u62e6\u622a\u5668",level:3},{value:"\u8ba4\u8bc1\u5904\u7406",id:"\u8ba4\u8bc1\u5904\u7406",level:3},{value:"\u7c7b\u578b\u5b9a\u4e49",id:"\u7c7b\u578b\u5b9a\u4e49",level:2},{value:"\u5b9e\u7528\u51fd\u6570",id:"\u5b9e\u7528\u51fd\u6570",level:2}
1,{value:"\u96c6\u6210\u793a\u4f8b",id:"\u96c6\u6210\u793a\u4f8b",level:2},{value:"React \u96c6\u6210",id:"react-\u96c6\u6210",level:3},{value:"Node.js \u96c6\u6210",id:"nodejs-\u96c6\u6210",level:3},{value:"\u6700\u4f73\u5b9e\u8df5",id:"\u6700\u4f73\u5b9e\u8df5",level:2},{value:"\u9519\u8bef\u5904\u7406",id:"\u9519\u8bef\u5904\u7406",level:3},{value:"\u5206\u9875",id:"\u5206\u9875",level:3}];function d(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"fecommunityreactpress-toolkit-\u4f7f\u7528\u6307\u5357",children:"@fecommunity/reactpress-toolkit \u4f7f\u7528\u6307\u5357"})}),"\n",(0,s.jsx)(n.p,{children:"ReactPress Toolkit \u662f\u4e00\u4e2a\u57fa\u4e8e TypeScript \u7684 API \u5ba2\u6237\u7aef\u5de5\u5177\u5305\uff0c\u4ece OpenAPI/Swagger \u89c4\u8303\u81ea\u52a8\u751f\u6210\uff0c\u7528\u4e8e\u4e0e ReactPress \u540e\u7aef\u670d\u52a1\u4ea4\u4e92\u3002"}),"\n",(0,s.jsx)(n.h2,{id:"\u6982\u8ff0",children:"\u6982\u8ff0"}),"\n",(0,s.jsx)(n.p,{children:"ReactPress Toolkit \u662f\u4e00\u4e2a API \u5ba2\u6237\u7aef\u5e93\uff0c\u63d0\u4f9b\u4e0e ReactPress \u540e\u7aef\u670d\u52a1\u4ea4\u4e92\u7684\u5f3a\u7c7b\u578b\u63a5\u53e3\u3002\u5b83\u5305\u62ec\uff1a"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u81ea\u52a8\u751f\u6210\u7684 API \u5ba2\u6237\u7aef"})," - \u9002\u7528\u4e8e\u6240\u6709 ReactPress \u6a21\u5757"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"TypeScript \u5b9a\u4e49"})," - \u9002\u7528\u4e8e\u6240\u6709\u6570\u636e\u5951\u7ea6"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u5b9e\u7528\u51fd\u6570"})," - \u9002\u7528\u4e8e\u5e38\u89c1\u64cd\u4f5c"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"HTTP \u5ba2\u6237\u7aef"})," - \u5185\u7f6e\u8ba4\u8bc1\u548c\u9519\u8bef\u5904\u7406"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u81ea\u52a8\u91cd\u8bd5\u673a\u5236"})," - \u9002\u7528\u4e8e\u5931\u8d25\u7684\u8bf7\u6c42"]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.strong,{children:"\u8bf7\u6c42/\u54cd\u5e94\u62e6\u622a\u5668"})," - \u9002\u7528\u4e8e\u65e5\u5fd7\u8bb0\u5f55"]}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:"\u8be5\u5de5\u5177\u5305\u4ece ReactPress \u540e\u7aef\u7684 OpenAPI \u89c4\u8303\u81ea\u52a8\u751f\u6210\uff0c\u786e\u4fdd\u59cb\u7ec8\u4e0e\u6700\u65b0\u7684 API \u53d8\u5316\u540c\u6b65\u3002"}),"\n",(0,s.jsx)(n.h2,{id:"\u5b89\u88c5",children:"\u5b89\u88c5"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install @fecommunity/reactpress-toolkit\n"})}),"\n",(0,s.jsx)(n.p,{children:"\u6216"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"yarn add @fecommunity/reactpress-toolkit\n"})}),"\n",(0,s.jsx)(n.p,{children:"\u6216"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"pnpm add @fecommunity/reactpress-toolkit\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\u5feb\u901f\u5f00\u59cb",children:"\u5feb\u901f\u5f00\u59cb"}),"\n",(0,s.jsx)(n.h3,{id:"\u4f7f\u7528\u9ed8\u8ba4-api-\u5b9e\u4f8b",children:"\u4f7f\u7528\u9ed8\u8ba4 API \u5b9e\u4f8b"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { api } from '@fecommunity/reactpress-toolkit';\n\n// \u83b7\u53d6\u6240\u6709\u6587\u7ae0\nconst articles = await api.article.findAll();\n\n// \u6839\u636e ID \u83b7\u53d6\u7279\u5b9a\u6587\u7ae0\nconst article = await api.article.findById('article-id');\n\n// \u521b\u5efa\u65b0\u6587\u7ae0\nconst newArticle = await api.article.create({\n title: '\u6211\u7684\u65b0\u6587\u7ae0',\n content: '\u6587\u7ae0\u5185\u5bb9...',\n // ... \u5176\u4ed6\u5c5e\u6027\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\u4f7f\u7528\u547d\u540d\u5bfc\u51fa",children:"\u4f7f\u7528\u547d\u540d\u5bfc\u51fa"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { api, types, utils } from '@fecommunity/reactpress-toolkit';\n\n// \u4f7f\u7528\u7c7b\u578b\u5316\u6570\u636e\nconst article: types.IArticle = {\n id: '1',\n title: '\u793a\u4f8b\u6587\u7ae0',\n // ... \u5176\u4ed6\u5c5e\u6027\n};\n\n// \u4f7f\u7528\u5b9e\u7528\u51fd\u6570\nconst formattedDate = utils.formatDate(new Date());\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\u914d\u7f6e",children:"\u914d\u7f6e"}),"\n",(0,s.jsx)(n.p,{children:"\u60a8\u53ef\u4ee5\u521b\u5efa\u5177\u6709\u7279\u5b9a\u914d\u7f6e\u7684\u81ea\u5b9a\u4e49 API \u5b9e\u4f8b\uff1a"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { http } from '@fecommunity/reactpress-toolkit';\n\nconst customApi = http.createApiInstance({\n baseURL: 'https://api.yourdomain.com',\n timeout: 10000,\n // ... \u5176\u4ed6 axios \u914d\u7f6e\u9009\u9879\n});\n\n// \u4f7f\u7528\u81ea\u5b9a\u4e49\u5b9e\u4f8b\nconst articles = await customApi.article.findAll(
1);\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\u4f01\u4e1a\u7ea7\u7279\u6027",children:"\u4f01\u4e1a\u7ea7\u7279\u6027"}),"\n",(0,s.jsx)(n.h3,{id:"\u81ea\u52a8\u91cd\u8bd5\u673a\u5236",children:"\u81ea\u52a8\u91cd\u8bd5\u673a\u5236"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { http } from '@fecommunity/reactpress-toolkit';\n\n// \u914d\u7f6e\u91cd\u8bd5\u8bbe\u7f6e\nconst customApi = http.createApiInstance({\n baseURL: 'https://api.yourdomain.com',\n retry: {\n retries: 3,\n retryDelay: 1000,\n retryCondition: (error) => {\n return error.response?.status === 503 || error.code === 'ECONNABORTED';\n }\n }\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\u8bf7\u6c42\u54cd\u5e94\u62e6\u622a\u5668",children:"\u8bf7\u6c42/\u54cd\u5e94\u62e6\u622a\u5668"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { http } from '@fecommunity/reactpress-toolkit';\n\nconst monitoredApi = http.createApiInstance({\n baseURL: 'https://api.yourdomain.com',\n interceptors: {\n request: (config) => {\n // \u6dfb\u52a0\u65e5\u5fd7\u3001\u6307\u6807\u7b49\n console.log(`\u8bf7\u6c42: ${config.method?.toUpperCase()} ${config.url}`);\n return config;\n },\n response: (response) => {\n // \u6dfb\u52a0\u65e5\u5fd7\u3001\u6307\u6807\u7b49\n console.log(`\u54cd\u5e94: ${response.status} ${response.config.url}`);\n return response;\n }\n }\n});\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\u8ba4\u8bc1\u5904\u7406",children:"\u8ba4\u8bc1\u5904\u7406"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { http, api, utils } from '@fecommunity/reactpress-toolkit';\n\n// \u81ea\u52a8\u4ee4\u724c\u5237\u65b0\nconst secureApi = http.createApiInstance({\n baseURL: 'https://api.yourdomain.com',\n auth: {\n tokenRefresh: async (refreshToken) => {\n const response = await api.auth.refresh({ refreshToken });\n return response.data.accessToken;\n }\n }\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\u7c7b\u578b\u5b9a\u4e49",children:"\u7c7b\u578b\u5b9a\u4e49"}),"\n",(0,s.jsxs)(n.p,{children:["\u6240\u6709\u6570\u636e\u6a21\u578b\u90fd\u662f\u5f3a\u7c7b\u578b\u7684\uff0c\u53ef\u901a\u8fc7 ",(0,s.jsx)(n.code,{children:"types"})," \u5bfc\u51fa\u4f7f\u7528\uff1a"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { types } from '@fecommunity/reactpress-toolkit';\n\nconst user: types.IUser = {\n name: 'John Doe',\n email: '[email protected]',\n // ... \u5176\u4ed6\u5c5e\u6027\n};\n"})}),"\n",(0,s.jsx)(n.p,{children:"\u53ef\u7528\u7684\u7c7b\u578b\u5b9a\u4e49\u5305\u62ec\uff1a"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IUser"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IArticle"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.ICategory"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.ITag"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IComment"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IFile"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.ISetting"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IPage"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IKnowledge"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.IView"})}),"\n",(0,s.jsx)(n.li,{children:(0,s.jsx)(n.code,{children:"types.I_SMTP"})}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"\u5b9e\u7528\u51fd\u6570",children:"\u5b9e\u7528\u51fd\u6570"}),"\n",(0,s.jsx)(n.p,{children:"\u5de5\u5177\u5305\u5305\u542b\u6709\u7528\u7684\u5b9e\u7528\u51fd\u6570\uff1a"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { utils } from '@fecommunity/reactpress-toolkit';\n\n// \u65e5\u671f\u683c\u5f0f\u5316\nconst formattedDate = utils.formatDate(new Date(), 'YYYY-MM-DD');\n\n// \u6df1\u5ea6\u514b\u9686\nconst clonedObject = utils.deepClone(originalObject);\n\n// \u9519\u8bef\u5904\u7406\nif (utils.ApiError.isInstance(error)) {\n console.log(`API \u9519\u8bef: ${error.code} - ${error.message}`);\n}\n\n// \u6570\u636e\u9a8c\u8bc1\nconst isValidEmail = utils.validateEmail('[email protected]');\n\n// \u5b57\u7b26\u4e32\u5904\u7406\nconst slug = utils.createSlug('\u6211\u7684\u6587\u7ae0\u6807\u9898');\n"})}
1),"\n",(0,s.jsx)(n.h2,{id:"\u96c6\u6210\u793a\u4f8b",children:"\u96c6\u6210\u793a\u4f8b"}),"\n",(0,s.jsx)(n.h3,{id:"react-\u96c6\u6210",children:"React \u96c6\u6210"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { useState, useEffect } from 'react';\nimport { api, types } from '@fecommunity/reactpress-toolkit';\n\nconst ArticleList = () => {\n const [articles, setArticles] = useState<types.IArticle[]>([]);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const fetchArticles = async () => {\n try {\n const response = await api.article.findAll();\n setArticles(response.data);\n } catch (error) {\n console.error('\u83b7\u53d6\u6587\u7ae0\u5931\u8d25:', error);\n } finally {\n setLoading(false);\n }\n };\n\n fetchArticles();\n }, []);\n\n if (loading) return <div>\u52a0\u8f7d\u4e2d...</div>;\n \n return (\n <div>\n {articles.map(article => (\n <div key={article.id}>\n <h2>{article.title}</h2>\n <p>{article.content}</p>\n </div>\n ))}\n </div>\n );\n};\n"})}),"\n",(0,s.jsx)(n.h3,{id:"nodejs-\u96c6\u6210",children:"Node.js \u96c6\u6210"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { api, types } from '@fecommunity/reactpress-toolkit';\n\nasync function syncArticles() {\n try {\n // \u4ece ReactPress \u83b7\u53d6\u6587\u7ae0\n const response = await api.article.findAll({\n limit: 100,\n offset: 0\n });\n \n // \u5904\u7406\u6587\u7ae0\n const articles: types.IArticle[] = response.data;\n \n // \u4e0e\u53e6\u4e00\u4e2a\u7cfb\u7edf\u540c\u6b65\n for (const article of articles) {\n // \u60a8\u7684\u540c\u6b65\u903b\u8f91\n console.log(`\u5df2\u540c\u6b65\u6587\u7ae0: ${article.title}`);\n }\n } catch (error) {\n console.error('\u540c\u6b65\u5931\u8d25:', error);\n }\n}\n\nsyncArticles();\n"})}),"\n",(0,s.jsx)(n.h2,{id:"\u6700\u4f73\u5b9e\u8df5",children:"\u6700\u4f73\u5b9e\u8df5"}),"\n",(0,s.jsx)(n.h3,{id:"\u9519\u8bef\u5904\u7406",children:"\u9519\u8bef\u5904\u7406"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { api, utils } from '@fecommunity/reactpress-toolkit';\n\ntry {\n const articles = await api.article.findAll();\n // \u5904\u7406\u6587\u7ae0\n} catch (error) {\n if (utils.ApiError.isInstance(error)) {\n switch (error.code) {\n case 401:\n // \u5904\u7406\u672a\u6388\u6743\u8bbf\u95ee\n redirectToLogin();\n break;\n case 403:\n // \u5904\u7406\u7981\u6b62\u8bbf\u95ee\n showPermissionError();\n break;\n case 500:\n // \u5904\u7406\u670d\u52a1\u5668\u9519\u8bef\n showServerError();\n break;\n default:\n // \u5904\u7406\u5176\u4ed6 API \u9519\u8bef\n showGenericError(error.message);\n }\n } else {\n // \u5904\u7406\u7f51\u7edc\u9519\u8bef\n showNetworkError();\n }\n}\n"})}),"\n",(0,s.jsx)(n.h3,{id:"\u5206\u9875",children:"\u5206\u9875"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-typescript",children:"import { api, types } from '@fecommunity/reactpress-toolkit';\n\nasync function fetchAllArticles(): Promise<types.IArticle[]> {\n const allArticles: types.IArticle[] = [];\n let offset = 0;\n const limit = 50;\n \n while (true) {\n const response = await api.article.findAll({ limit, offset });\n allArticles.push(...response.data);\n \n if (response.data.length < limit) {\n // \u6ca1\u6709\u66f4\u591a\u6587\u7ae0\u53ef\u83b7\u53d6\n break;\n }\n \n offset += limit;\n }\n \n return allArticles;\n}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.