# article-module

**Repository Path**: ruovea-component/article-module

## Basic Information

- **Project Name**: article-module
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-22
- **Last Updated**: 2026-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @ruovea/article

KeGie.Admin 文章/内容管理模块（文章 / 分类 / 标签），以 **pnpm 源码包** 形式提供给各宿主项目复用。

- **不打 dist、不发 npm**——exports 直指 `./src/*`，由宿主 Vite 编译
- **依赖注入解耦**——request / auth / i18n / Editor / ModifyRecord 全部由宿主装配时注入
- **零侵入**——包内不含 `/@/` 等宿主别名引用，可脱离 KeGie.Admin 运行

---

## 一、目录结构

```
src/
├─ index.ts          # 入口：导出 ArticlePlugin + API + 类型
├─ plugin.ts         # Vue install（校验必填项 / provide / mergeLocaleMessage）
├─ context.ts        # InjectionKey + useArticleContext()
├─ types.ts          # ArticlePluginOptions
├─ routes.ts         # 4 条静态路由（可选使用）
├─ api/
│  ├─ index.ts       # 文章/分类/标签 API
│  ├─ http.ts        # request 注入点
│  ├─ endpoints.ts   # URL 前缀（可覆盖）
│  ├─ article.ts     # 7 个文章 API
│  ├─ category.ts    # 5 个分类 API
│  └─ tag.ts         # 5 个标签 API
├─ i18n/locales/     # 6 语言（en / fr-fr / ja-jp / vi-vn / zh-cn / zh-tw）
└─ views/
   ├─ article/
   │  ├─ index.vue           # 文章列表页
   │  └─ edit/index.vue      # 文章新增/编辑/查看页
   ├─ category/index.vue     # 分类管理页
   └─ tag/index.vue          # 标签管理页
```

---

## 二、宿主接入

### 2.1 安装

宿主 `package.json` 用 `link:` 协议指向本仓库：

```json
{
  "dependencies": {
    "@ruovea/article": "link:../../article-module/packages/article"
  }
}
```

```bash
cd <article-module 目录> && pnpm install   # 包内依赖（element-plus 等裸导入需要）
cd <宿主> && pnpm install                   # 建立 link
```

### 2.2 装配插件

在宿主中创建插件文件，`app.use(pinia)` 之后调用：

```ts
// plugins/article.ts
import { computed, defineAsyncComponent, type App } from 'vue';
import { ArticlePlugin } from '@ruovea/article';
import request from '/@/utils/request';
import { auth } from '/@/utils/authFunction';
import { i18n } from '/@/i18n/index';

export function setupArticle(app: App) {
  app.use(ArticlePlugin, {
    request: request as any,
    auth,
    i18n: i18n as any,
    components: {
      Editor: defineAsyncComponent(() => import('/@/components/editor/index.vue')),
      ModifyRecord: defineAsyncComponent(() => import('/@/components/modifyRecord/index.vue')),
    },
  });
}
```

```ts
// main.ts
import { setupArticle } from '/@/plugins/article';
// ... app.use(pinia) 之后
setupArticle(app);
```

---

## 三、ArticlePluginOptions 说明

| 字段 | 必填 | 说明 |
|---|---|---|
| `request` | ✅ | 宿主 axios 实例（已配 baseURL / token / 拦截器） |
| `components.Editor` | ✅ | 富文本编辑器（edit 页用），需支持 `v-model:getHtml`、`:disable`、`:height`、`:placeholder` props |
| `components.ModifyRecord` | ✅ | 修改记录展示组件，接收 `:data` prop |
| `auth` | ➖ | `(code: string) => boolean`，按钮权限校验，缺省 `() => true` |
| `i18n` | ➖ | 宿主 vue-i18n 实例（用于 mergeLocaleMessage） |
| `filePreviewApi` | ➖ | 封面图片预览，缺省走 `GET /FileUpload/Preview` |
| `fileUploadApi` | ➖ | 封面上传，缺省走 `POST /FileUpload/Image` |
| `endpoints` | ➖ | 覆盖 API URL 前缀（见下方 Endpoints 章节） |
| `registerI18n` | ➖ | 是否自动 merge i18n，默认 `true` |

### i18n 注入约定

包内所有视图使用 `message.article.xxx` / `message.router.xxx` 格式的 key。插件 merge 时同时注册到顶层和 `message` 层，兼容宿主两级结构。

包的 `exports` 已暴露 `./i18n` 子路径（`articleLocales`），方便宿主自行组装。

---

## 四、Endpoints 说明

所有 API 路径均可通过 `endpoints` 覆盖，默认值：

```ts
interface ArticleEndpoints {
  articlePages:     '/Article/Pages'
  articleData:      '/Article/Data'
  articleAddData:   '/Article/AddData'
  articleUpdateData:'/Article/UpdateData'
  articleDeleteData:'/Article/DeleteData'
  articleUpload:    '/Article/upload'
  articleUploadImg: '/Article/upload-image'
  filePreview:      '/FileUpload/Preview'
  fileUploadImage:  '/FileUpload/Image'
  categoryPages:    '/Category/Pages'
  categoryList:     '/Category/List'
  categoryAddData:  '/Category/AddData'
  categoryUpdateData:'/Category/UpdateData'
  categoryDeleteData:'/Category/DeleteData'
  tagPages:         '/Tag/Pages'
  tagAllList:       '/Tag/AllList'
  tagAddData:       '/Tag/AddData'
  tagUpdateData:    '/Tag/UpdateData'
  tagDeleteData:    '/Tag/DeleteData'
}
```

---

## 五、权限编码清单

宿主 `auth(code)` 需识别以下编码：

| 编码 | 位置 | 说明 |
|---|---|---|
| `article:pages` | 文章列表 | 查询按钮 |
| `article:addData` | 文章列表 | 新增按钮 |
| `article:updateData` | 文章列表 | 编辑按钮 |
| `article:deleteData` | 文章列表 | 删除按钮 |
| `article:data` | 文章列表 | 查看按钮 |
| `article:add` | 分类/标签列表 | 新增按钮 |
| `article:edit` | 分类/标签列表 | 编辑按钮 |
| `article:delete` | 分类/标签列表 | 删除按钮 |

未注入 `auth` 时所有按钮可见（缺省 `() => true`）。

---

## 六、路由

### 4 条路由一览

| path | name | keepAlive | 说明 |
|---|---|---|---|
| `/business/article` | articleIndex | ✅ | 文章列表 |
| `/business/article/edit` | articleEdit | ❌ | 文章新增/编辑/查看 |
| `/business/article/category` | articleCategory | ✅ | 分类管理 |
| `/business/article/tag` | articleTag | ✅ | 标签管理 |

> 路由中 `meta.title` 使用 `message.router.articleIndex` 等 i18n 键，菜单翻译资源已在包内 locale 文件中自包含，无需宿主额外配置。

---

## 七、License

MIT