@daflow-ui/ui-article

Article typography component for DaFlow UI. Renders backend HTML content with blog-style typography.

Installation

pnpm add @daflow-ui/ui-article

Usage

全局引入样式（在 main.ts 中）：

import '@daflow-ui/ui-article/style.css';

在组件中使用：

<script setup lang="ts">
import { DfArticle } from '@daflow-ui/ui-article';
</script>

<template>
  <!-- 传入后端返回的 HTML 字符串 -->
  <DfArticle :html="htmlContent" />

  <!-- 或者使用 slot 自定义内容 -->
  <DfArticle>
    <div v-html="htmlContent" />
  </DfArticle>
</template>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | html | string | — | 后端返回的 HTML 字符串，优先级高于 slot |

当 html 未传入时，使用默认 slot 渲染内容。

CSS 变量

可通过覆盖 CSS 变量自定义样式：

[data-scope="article"] {
  --df-article-font-size: 16px;
  --df-article-line-height: 1.8;
  --df-article-color: #374151;
  --df-article-heading-color: #111827;
  --df-article-link-color: #2563eb;
  --df-article-code-bg: #f3f4f6;
  --df-article-code-color: #be185d;
  --df-article-pre-bg: #1f2937;
  --df-article-blockquote-border: #d1d5db;
  --df-article-border-color: #e5e7eb;
  --df-article-img-border-radius: 8px;
  --df-article-max-width: none;
}

Development

cd ../..  # 回到 monorepo 根目录
pnpm dev  # 启动统一 playground，自动发现组件

License

MIT