@web-mods/articles 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -28
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# @web-
|
|
1
|
+
# @web-mods/articles
|
|
2
2
|
|
|
3
3
|
文章管理组件库,提供完整的文章 CRUD 管理界面(列表、编辑、详情)以及服务端 HTML 渲染能力。
|
|
4
4
|
|
|
5
5
|
## 安装
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
pnpm add @web-
|
|
8
|
+
pnpm add @web-mods/articles
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
> **Peer dependencies**:`react >=18`、`react-dom >=18`
|
|
@@ -18,13 +18,13 @@ pnpm add @web-module/articles
|
|
|
18
18
|
|
|
19
19
|
### 1. 配置 ArticleService(可选)
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
**`service` prop 不传即使用内置默认值,无需任何配置**。
|
|
22
22
|
|
|
23
23
|
只有以下情况才需要手动配置:
|
|
24
24
|
|
|
25
25
|
**自定义 API 地址:**
|
|
26
26
|
```ts
|
|
27
|
-
import { createArticleService } from '@web-
|
|
27
|
+
import { createArticleService } from '@web-mods/articles'
|
|
28
28
|
const articleService = createArticleService('https://your-api.example.com')
|
|
29
29
|
// 然后传给 Provider:<ArticlesProvider service={articleService} ...>
|
|
30
30
|
```
|
|
@@ -32,7 +32,7 @@ const articleService = createArticleService('https://your-api.example.com')
|
|
|
32
32
|
**完全自定义请求逻辑**(如附带鉴权 Header、适配不同数据格式等):
|
|
33
33
|
|
|
34
34
|
```ts
|
|
35
|
-
import type { ArticleService } from '@web-
|
|
35
|
+
import type { ArticleService } from '@web-mods/articles'
|
|
36
36
|
|
|
37
37
|
const articleService: ArticleService = {
|
|
38
38
|
getList: (params) => api.get('/news', { params }), // 返回 { items, total }
|
|
@@ -79,8 +79,8 @@ export default [
|
|
|
79
79
|
```tsx
|
|
80
80
|
// pages/articles/layout.tsx
|
|
81
81
|
import { Outlet } from 'react-router'
|
|
82
|
-
import { ArticlesProvider, ReactRouterAdapter } from '@web-
|
|
83
|
-
import '@web-
|
|
82
|
+
import { ArticlesProvider, ReactRouterAdapter } from '@web-mods/articles'
|
|
83
|
+
import '@web-mods/articles/style.css'
|
|
84
84
|
|
|
85
85
|
export default function ArticlesLayout() {
|
|
86
86
|
return (
|
|
@@ -101,8 +101,8 @@ export default function ArticlesLayout() {
|
|
|
101
101
|
// app/articles/layout.tsx
|
|
102
102
|
'use client'
|
|
103
103
|
import { useRouter } from 'next/navigation'
|
|
104
|
-
import { ArticlesProvider } from '@web-
|
|
105
|
-
import '@web-
|
|
104
|
+
import { ArticlesProvider } from '@web-mods/articles'
|
|
105
|
+
import '@web-mods/articles/style.css'
|
|
106
106
|
|
|
107
107
|
export default function ArticlesLayout({ children }: { children: React.ReactNode }) {
|
|
108
108
|
const router = useRouter()
|
|
@@ -118,7 +118,7 @@ export default function ArticlesLayout({ children }: { children: React.ReactNode
|
|
|
118
118
|
// app/articles/[id]/edit/page.tsx
|
|
119
119
|
'use client'
|
|
120
120
|
import { useParams } from 'next/navigation'
|
|
121
|
-
import { ArticleEdit } from '@web-
|
|
121
|
+
import { ArticleEdit } from '@web-mods/articles'
|
|
122
122
|
|
|
123
123
|
export default function EditPage() {
|
|
124
124
|
const { id } = useParams<{ id: string }>()
|
|
@@ -130,7 +130,7 @@ export default function EditPage() {
|
|
|
130
130
|
|
|
131
131
|
```tsx
|
|
132
132
|
// React Router:无需传 props,路由参数由 ReactRouterAdapter 自动注入
|
|
133
|
-
import { ArticleList, ArticleEdit, ArticleDetail } from '@web-
|
|
133
|
+
import { ArticleList, ArticleEdit, ArticleDetail } from '@web-mods/articles'
|
|
134
134
|
export default function ListPage() { return <ArticleList /> }
|
|
135
135
|
export default function EditPage() { return <ArticleEdit /> }
|
|
136
136
|
export default function DetailPage() { return <ArticleDetail /> }
|
|
@@ -147,7 +147,7 @@ export default function DetailPage() { return <ArticleDetail id={id} /> }
|
|
|
147
147
|
| 属性 | 类型 | 必填 | 说明 |
|
|
148
148
|
|------|------|------|------|
|
|
149
149
|
| `basePath` | `string` | ✅ | 文章路由根路径,如 `/articles` |
|
|
150
|
-
| `service` | `ArticleService` | — |
|
|
150
|
+
| `service` | `ArticleService` | — | 数据服务,不传使用内置默认值 |
|
|
151
151
|
| `navigate` | `(path: string) => void` | — | 非 react-router 环境必传,由框架路由实现跳转 |
|
|
152
152
|
| `previewBaseUrl` | `string` | — | 预览 iframe 注入 `<base href="..."`,用于正确加载相对路径资源 |
|
|
153
153
|
| `previewTailwind` | `boolean` | — | 预览时自动注入 Tailwind CDN,适合内容使用了 Tailwind 类名的场景 |
|
|
@@ -186,14 +186,14 @@ interface Article {
|
|
|
186
186
|
从独立的 `server` 入口引入,**不包含任何 React 依赖**,可安全在服务端使用:
|
|
187
187
|
|
|
188
188
|
```ts
|
|
189
|
-
import { renderArticleByPathname } from '@web-
|
|
189
|
+
import { renderArticleByPathname } from '@web-mods/articles/server'
|
|
190
190
|
```
|
|
191
191
|
|
|
192
192
|
### Next.js 示例
|
|
193
193
|
|
|
194
194
|
```ts
|
|
195
195
|
// app/[slug]/route.ts
|
|
196
|
-
import { renderArticleByPathname, defaultArticleService } from '@web-
|
|
196
|
+
import { renderArticleByPathname, defaultArticleService } from '@web-mods/articles/server'
|
|
197
197
|
|
|
198
198
|
export async function GET(_req: Request, { params }: { params: Promise<{ slug: string }> }) {
|
|
199
199
|
const { slug } = await params
|
|
@@ -206,7 +206,7 @@ export async function GET(_req: Request, { params }: { params: Promise<{ slug: s
|
|
|
206
206
|
如需自定义 API 地址:
|
|
207
207
|
|
|
208
208
|
```ts
|
|
209
|
-
import { renderArticleByPathname, createArticleService } from '@web-
|
|
209
|
+
import { renderArticleByPathname, createArticleService } from '@web-mods/articles/server'
|
|
210
210
|
|
|
211
211
|
const service = createArticleService('https://your-api.example.com')
|
|
212
212
|
|
|
@@ -234,17 +234,5 @@ export async function GET(_req: Request, { params }: { params: Promise<{ slug: s
|
|
|
234
234
|
组件库使用 Tailwind CSS 构建,样式已编译打包至 `dist/style.css`。在 Layout 中引入一次即可,框架会在构建时将其内联进 `<head>`,**不会有样式闪烁(FOUC)**:
|
|
235
235
|
|
|
236
236
|
```ts
|
|
237
|
-
import '@web-
|
|
237
|
+
import '@web-mods/articles/style.css'
|
|
238
238
|
```
|
|
239
|
-
|
|
240
|
-
---
|
|
241
|
-
|
|
242
|
-
## 发布新版本(维护者)
|
|
243
|
-
|
|
244
|
-
```bash
|
|
245
|
-
pnpm release # patch 升版本 1.0.x → 1.0.x+1
|
|
246
|
-
pnpm release:minor # minor 升版本 1.0.x → 1.1.0
|
|
247
|
-
pnpm release:major # major 升版本 1.x.x → 2.0.0
|
|
248
|
-
```
|
|
249
|
-
|
|
250
|
-
流程:构建 → 升版本号 → git commit → publish → git push。
|