# SoftArticleLayout

**Repository Path**: hyscode/soft-article-layout

## Basic Information

- **Project Name**: SoftArticleLayout
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-26
- **Last Updated**: 2026-08-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 软文排版工具（秀米风格）

一个基于 **Vue 3 生态**实现的图文 / 软文可视化排版编辑器，类似「秀米」的编辑体验：
左侧组件库拖拽、中间手机画布编辑、右侧属性面板调样式，支持撤销重做、自动保存、模板套用与一键导出 HTML。

## 技术栈（周边生态）

| 能力 | 选型 |
| --- | --- |
| 框架 | Vue 3（`<script setup>` + Composition API） |
| 构建 | Vite 5 |
| 状态管理 | Pinia（编辑器单一数据源 + 撤销/重做 + 自动保存） |
| UI 组件库 | Element Plus（按钮 / 弹窗 / 滑块 / 颜色选择器 / 开关等） |
| 拖拽排序 | vuedraggable（基于 Sortable.js，支持跨列拖拽与画布内重排） |
| 富文本 | 原生 `contenteditable` + `document.execCommand`（加粗 / 斜体 / 下划线 / 颜色） |

## 功能

- **组件库**：标题、正文、图片、分割线、引用、卡片、图文混排、按钮、留白 9 种基础组件。
- **拖拽编辑**：从左侧拖入画布，画布内可拖拽排序；点击组件快速添加。
- **选中即改**：选中组件后右侧出现「内容 / 样式」面板，字号、颜色、对齐、行高、间距、圆角、边框、阴影等均可视化调整。
- **富文本**：正文 / 引用 / 卡片正文支持选区加粗、斜体、下划线、文字颜色。
- **模板**：内置「活动通知 / 产品种草 / 节日祝福 / 空白文章」整篇模板，一键套用。
- **撤销 / 重做**：支持 Ctrl+Z / Ctrl+Y 快捷键，连续输入自动合并历史。
- **自动保存**：编辑内容实时写入 `localStorage`，刷新不丢失。
- **预览 / 导出**：预览当前效果；导出可直接粘贴进公众号 / 秀米编辑器的 HTML 片段（图片内嵌为 base64，无需外链），亦可下载完整 HTML 文件。

## 目录结构

```
vue-front/
├─ index.html
├─ vite.config.js
├─ package.json
└─ src/
   ├─ main.js                 # 入口，挂载 Pinia / Element Plus / 图标
   ├─ App.vue                 # 三栏布局 + 快捷键
   ├─ style.css               # 全局样式变量
   ├─ config/
   │  └─ blockConfig.js       # 组件注册表（默认内容/样式/可编辑项）—— 数据契约
   ├─ stores/
   │  └─ editor.js            # Pinia 编辑器 store（增删改/撤销重做/模板/持久化）
   ├─ utils/
   │  ├─ style.js             # 数据模型 → CSS 对象（渲染） / CSS 字符串（导出）
   │  ├─ exportHtml.js        # 生成可粘贴的 HTML
   │  ├─ templates.js         # 预设整篇模板
   │  ├─ image.js             # 本地图片 → base64
   │  └─ clipboard.js         # 复制降级方案
   └─ components/
      ├─ common/
      │  ├─ EditableText.vue   # 光标稳定的 contenteditable
      │  ├─ RichToolbar.vue    # 富文本浮动工具条
      │  └─ ImagePicker.vue    # 图片上传 / URL 选择
      ├─ blocks/               # 各类型组件渲染
      │  ├─ BlockRenderer.vue   # 按 type 分发
      │  └─ Block*.vue
      └─ layout/               # 顶栏 / 组件库 / 画布 / 属性面板
         ├─ TopBar.vue
         ├─ ComponentLibrary.vue
         ├─ EditorCanvas.vue
         └─ PropertyPanel.vue
```

## 运行

```bash
# 安装依赖
npm install

# 本地开发（默认 http://localhost:5173）
npm run dev

# 生产构建
npm run build

# 预览构建产物
npm run preview
```

## 设计要点

- **数据与视图分离**：每种组件在 `blockConfig.js` 中以「默认内容 + 默认样式 + 可编辑项声明」描述，
  渲染层（`Block*`）与属性面板（`PropertyPanel`）都消费同一份声明，新增组件类型只需在注册表加一项。
- **样式双用**：`utils/style.js` 的 `buildStyleObj` 既用于实时渲染（`:style` 对象），
  也通过 `styleToCss` 转为导出 HTML 的内联样式，保证「所见即所得」。
- **撤销重做**：基于快照栈，连续打字（同一 coalesce key 且间隔 < 700ms）自动合并，避免历史爆炸。